React-SearchKit - a React library that allows you to build in an easy way your search application

Last update: Jun 17, 2022

React-SearchKit

Build status Release License Downloads

React-SearchKit is a React library that allows you to build in an easy way your search application.

Main features:

  • ready-to-use collection of UI components
  • configurable REST API endpoint and serialization
  • configurable URL parameters handling for deep linking

React-SearchKit screenshot

Examples

You can find a collection of examples in the src/demos folder:

  • Elasticsearch, an example on how to query Elasticsearch (see below)
  • Zenodo.org, an example on how to query an Invenio 3 instance
  • CERN Videos, another Invenio 3 example

Install dependencies and run the React app to try them out (see steps below).

Elasticsearch

To run the Elasticsearch backend for the demo, you can use Docker. A docker-compose file with ES 7 and nginx as reverse proxy is available and ready to use. Run the services:

cd src/demos/elasticsearch/docker
docker-compose up

Then, init the demo data:

curl -XPUT 'http://localhost:9200/random?pretty' -H 'Content-Type: application/json' -d @es7-mappings.json
curl -XPOST 'http://localhost:9200/random/_bulk' -H 'Content-Type: application/json' --data-binary @es-random-data.json
curl -XGET 'http://localhost:9200/random/_count?pretty'

Demo data have been randomly generated using https://next.json-generator.com.

In case you want to clear your elastic search from data you can use curl -X DELETE 'http://localhost:9200/_all'

Developer guide

React-SearchKit uses create-react-app as development toolkit.

Install the library:

npm install

Start the demo application:

npm start

The library uses Jest as test runner. To run the tests:

npm test

The library uses rollup to build a final version inside the /dist folder and it will build CommonJS and ES Modules versions:

npm run build

GitHub

https://github.com/inveniosoftware/react-searchkit
Comments
  • 1. Update dropdowns for a11y

    *Adds "selectOnNavigation=false" to not submit each option as keyboard-only user navigates among them with the down arrow *Adds aria-labels for screenreaders

    closes https://github.com/inveniosoftware/react-searchkit/issues/220

    :heart: Thank you for your contribution!

    Description

    Please describe briefly your pull request.

    Checklist

    :rotating_light: Please review the guidelines for contributing to Invenio.

    • [ ] Did you create different commits for logically separate things? Check the format of the commit(s) message(s).
    • [ ] [InvenioRDM specific] Did you follow the style guide? Check the documentation.
    • [ ] [InvenioRDM specific] Did you add translations (i18n) for new labels, backend and frontend? Check the documentation.
    • [ ] [InvenioRDM specific] Did you add accessibility (a11y) tags? Check the documentation.
    • [ ] Did you add documentation? We all love well-documented frameworks, right?
    • [ ] Did you include third-party code (a library, package, etc.)? If yes:
      • [ ] Make sure that its open source license is compatible with Invenio (note: GPL and AGPL licensed code is not accepted)
      • [ ] Did you respect the license conditions (normally you need to keep the copyright and license header)?

    Green light on all GitHub Actions status checks is required in order to merge your PR. Check your code additions will fail neither code linting checks nor tests and will not decrease test coverage.

    External contributors

    Copyright

    • [ ] Identify who is the copyright holder (a legal entity - i.e. person or organization - normally this is your employer) for the produced code.
    • [ ] Make sure that you have updated the copyright headers for touched files (non-trivial contributions >15 lines).

    See copyright and license policy for details.

    Reminder

    By using GitHub, you have already agreed to the GitHub’s Terms of Service including that:

    1. You license your contribution under the same terms as the current repository’s license.
    2. You agree that you have the right to license your contribution under the current repository’s license.

    If you ticked all the boxes above, you're good to go! :rocket:

    Reviewed by lhenze at 2022-03-10 17:51
  • 2. bug: ResultsLoader children multiple instances

    All the components that are wrapped inside <ResultsLoader></ResultsLoader> component are constructed twice check ResultsLoader render.

    This is due to the fact that our state starts with loading = false, so what happens is

    1. initial state loading = false: children get instantiated
    2. loading stateloading = true: spinner is shown all good
    3. completed state loading = false: children get instantiated (again)

    Although changing the initialState to true does the trick, a singleton on children or another approach might serve us better, @zzacharo @ntarocco WDYT?

    Reviewed by topless at 2020-03-30 09:37
  • 3. Reset button for SearchBar

    Describe the solution you'd like

    An optional reset button to empty the search field would be nice.

    Describe alternatives you've considered

    Maybe you have a hint for overriding this component? Im stuck with addressing the store; updateQueryState?

    Reviewed by ksuess at 2021-03-26 12:54
  • 4. fix url not updating state

    • fixes url history not updating the internal state
    • closes inveniosoftware/react-invenio-app-ils#274

    Tested on zenodo demo and on ILS. Also tested on CDS videos demo which has disabled support for url handling.

    It may not be the best way to do it, but it works. I'm preventing the url from being updated twice: this is a workaround (I hope temporary) because the url is replaced twice, and even though the state is equivalent in both cases the order of the attributes is not.

    Open to suggestions.

    Reviewed by FlorianCassayre at 2020-11-09 10:02
  • 5. ResultsLoader does not work!!!

    I added component ResultsLoader to my app.

    const InitialLoaderComponent = () => {
        return <div>Loading...</div>
    }
    
    <ResultsLoader renderElement={InitialLoaderComponent}/>
    

    The document is very confused, to be honest. It is written that the ResultsLoader component only has one prop, which is renderElement to override the default rendered component. However, my code did not work. It kept saying that:

    Uncaught Error: ResultsLoader(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
    

    Even if I removed prop renderElement and just use <ResultsLoader />, it still showed the same error

    Reviewed by hauph at 2020-02-24 08:19
  • 6. ESSearchAPI is not a constructor

    Hello,

    I followed this instruction to connect ElasticSearch to react-searchkit, and my configuration was as follow:

    import { 
        ESSearchAPI,
        ReactSearchKit, 
        ResultsGrid, 
    } from 'react-searchkit';
    
    export default class FileLibrary extends React.Component<Props, State> {
       constructor(props:Props) {
           super(props);
           
           this.searchkit = new ESSearchAPI({
               url: `https://localhost:9200/my-index/_search`,
               timeout: 5000,
           });
       }
    }
    

    However, it did not succeed and instead I received the following error: index.js:120 Uncaught TypeError: react_searchkit__WEBPACK_IMPORTED_MODULE_16__.ESSearchAPI is not a constructor

    Can anyone please tell my what I did wrong here? I would be truly grateful for any help.

    Reviewed by hauph at 2020-02-21 07:35
  • 7. Demo: create several demos

    • Split the demo in multiple examples showing different search UIs (using different components for example)
    • There should be a demo with a generic backend
    • There should be a demo with a ES like backend
    Reviewed by ntarocco at 2018-10-29 09:13
  • 8. Getting started instructions fail

    Package version (if known): v1.0.0-alpha.14

    Describe the bug

    Following instructions literally from https://inveniosoftware.github.io/react-searchkit/docs/getting-started produces the following compilation error:

    Compiling...
    /home/cebrian/borralodedentro/search-app/node_modules/react-scripts/scripts/start.js:19
      throw err;
      ^
    
    [Error: ENOENT: no such file or directory, stat '/initrd.img'] {
      errno: -2,
      code: 'ENOENT',
      syscall: 'stat',
      path: '/initrd.img'
    }
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    

    Steps to Reproduce

    1. Follow instructions in https://inveniosoftware.github.io/react-searchkit/docs/getting-started
    2. When running yarn start you'll see the compilation error

    Expected behavior

    Demo application up and running

    Additional context

    Used:

    • node v15.13.0
    • npx 6.14.8
    • yarn 1.22.5
    Reviewed by tonicebrian at 2021-04-01 05:34
  • 9. fix sort state

    • fixes the sorting filter not behaving properly since #149, namely the two following issues were resolved:
      • if the query is empty, then the sorting state was correctly set to defaultSortingOnEmptyQueryString but the url was not updated accordingly
      • if the page is reloaded, then the sorting parameters in the url were not used and the state would use the default value instead
    • fixes a non-related programming mistake (the intent was assumed)

    Tested on ILS, also made sure that it didn't break the history feature. Now:

    • if the user did not change the sortby value and the url it came from did not contain a sort parameter, then:
      • the sortby value both in the state and in the url will depend on the query being empty or not, and will update accordingly so long as the user does not manually change the sortby value
    • otherwise the sortby value will follow the user's choice
    Reviewed by FlorianCassayre at 2020-11-20 16:41
  • 10. handle malformed urls

    • addresses inveniosoftware/react-invenio-app-ils#128
    • also exposes the class UrlParamValidator in case one needs to build a stricter validator on top of it (for instance, ensure the provided page size is indeed an option of the dropdown)
    Reviewed by FlorianCassayre at 2020-11-10 15:00
  • 11. RSK: implement sorting on empty query string

    • introduces a new prop to define which sorting to use on empty query string
    • adds a new private app state to the store to keep track if the user has selected a new sorting and what was the initial sorting before change
    • adds tests
    • changes documentation
    • closes #111
    Reviewed by ntarocco at 2020-11-01 19:19
  • 12. build(deps): bump terser from 5.12.1 to 5.14.2

    Bumps terser from 5.12.1 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-21 00:55
  • 13. Search page facet bar(s): element IDs are duplicated

    Currently there are many (54) duplicate IDs on a search page. These each count as an error with the automated A11y tools. (https://127.0.0.1:5000/search?q=&l=list&p=1&s=10&sort=newest)

    I think it is because the facet panel is duplicated... one for narrow screens, one for full-width.

    Apparently even though one of the panels is always hidden, it still gets included in the scan.

    Conversation about it here: https://github.com/dequelabs/axe-core/issues/3363

    Reviewed by lhenze at 2022-05-31 18:27
  • 14. build(deps): bump ejs from 3.1.6 to 3.1.7

    Bumps ejs from 3.1.6 to 3.1.7.

    Release notes

    Sourced from ejs's releases.

    v3.1.7

    Version 3.1.7

    Commits
    • 820855a Version 3.1.7
    • 076dcb6 Don't use template literal
    • faf8b84 Skip test -- error message vary depending on JS runtime
    • c028c34 Update packages
    • e4180b4 Merge pull request #629 from markbrouwer96/main
    • d5404d6 Updated jsdoc to 3.6.7
    • 7b0845d Merge pull request #609 from mde/dependabot/npm_and_yarn/glob-parent-5.1.2
    • 32fb8ee Bump glob-parent from 5.1.1 to 5.1.2
    • f21a9e4 Merge pull request #603 from mde/mde-null-proto-where-possible
    • a50e46f Merge pull request #606 from akash-55/main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 12:34
  • 15. build(deps): bump async from 2.6.3 to 2.6.4 in /docs/website

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 12:34
  • 16. Fix CI linting

    Package version (if known): master

    Describe the bug

    A eslint dpendency got updated and the linting is failing, causing problems with running tests.

    Expected behavior

    Screenshots (if applicable)

    Additional context

    Check eslint-invenio for any external dependency update

    Reviewed by zzacharo at 2022-04-28 12:26
Movie search engine - Clone and use as your own movie search engine

Getting Started with movie_search_engine Step 1 Clone movie_search_engine this r

Feb 28, 2022
A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cities and save them to favourites on local storage.
A weather app done with React. Allows you to make a search for the current weather by simply typing

Simpliest Weather React-App A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cit

May 24, 2022
A dynamic UI library that allows you to build pages using drag and drop components and configurations.

react-dragd A dynamic UI library that allows you to build pages using drag and drop components and configurations. Try it - Code Sandbox To start npm

Aug 1, 2022
This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone.
This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone.

This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone. The days of forgetting a task or meeting are no more with ToodleDo app.

Dec 14, 2021
SOS MOTO - a mobile application written in React Native that allows you to call a nearest contact from your GPS location to get a quick help
SOS MOTO - a mobile application written in React Native that allows you to call a nearest contact from your GPS location to get a quick help

SOS MOTO is a mobile application written in React Native that allows you to call a nearest contact from your GPS location to get a quick help. We have over 10k active users in Europe and steadily growing.

Jul 11, 2022
A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Jun 24, 2022
A Google Clone which built with ReactJS. You can search whatever you want.

A React app which is Google Web Clone that you can simply search whatever you want.

Nov 24, 2021
A Recipe App that lets you search for recipes and also show you some in the homepage
A Recipe App that lets you search for recipes and also show you some in the homepage

if you just want to run it locally without specifications, you can go to the How to run it locally section What is this App about? It's a Recipe App t

Jul 17, 2022
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Jul 30, 2022
Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers 📽️ 🍿 Used ReactJS, Material UI, Firebase, Firestore Database
Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers 📽️ 🍿 Used ReactJS, Material UI, Firebase, Firestore Database

Netflix Clone. Search and find your favorite movie with coming from TMDB API. Also you can watch the trailers ??️ ?? Used ReactJS, Material UI, Firebase, Firestore Database

Apr 20, 2022
A web application that allows the user to graphically build quantum circuits and view the results on a dashboard ⚛️
 A web application that allows the user to graphically build quantum circuits and view the results on a dashboard ⚛️

A web application that allows the user to graphically build quantum circuits and view the results on a dashboard. This project combines React, TypeScript frontend with a Flask, Python backend using Qiskit library to perform quantum operations.

Jul 2, 2022
A Disney+ Clone that you can sign in with your Google AccountA Disney+ Clone that you can sign in with your Google Account

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Jun 30, 2022
A simple and convenient way to monitor the activity and performance of your servers. Probably more ergonomic than your average terminal htop.
A simple and convenient way to monitor the activity and performance of your servers. Probably more ergonomic than your average terminal htop.

A simple and convenient way to monitor the activity and performance of your servers. Probably more ergonomic than your average terminal htop.

Jul 14, 2022
Application that allows you read posts
Application that allows you read posts

?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: NextJs Prismic ?? Telas Home. Na primeira imagem é possível ver o conceito

Feb 27, 2022
This web tool allows you to add your daily commodities with their price and titile
This web tool allows you to add your daily commodities with their price and titile

Xpenser It's a web utility which allows you to add your daily expenses, commodity along with their price, and keep track of them. It also provides you

May 19, 2022
Website breaker allows you to simulate a breaking effect on your webpages.
Website breaker allows you to simulate a breaking effect on your webpages.

Website -breaker | linkedin Purpose Website breaker allows you to simulate a breaking effect on your webpages. Examples An example usage on my persona

May 30, 2022
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Jul 4, 2022
Mobile app that lets you search for games. Using IGDB and built with Expo (React Native)
Mobile app that lets you search for games. Using IGDB and built with Expo (React Native)

Mobile app that lets you search for games. Using IGDB and built with Expo (React Native). game-search-expo.mp4 Try it out with Expo: https://expo.io/@

May 28, 2022
Fruits React App - helps you search fruit online and learn nutrition facts

Fruits Center Fruit Centers helps you search fruit online and learn nutrition facts.

May 24, 2022