\n\n\n\n\n- [react-instantsearch](#react-instantsearch)\n - [Why](#why)\n - [Installation](#installation)\n - [Getting started](#getting-started)\n - [Documentation](#documentation)\n - [Playground](#playground)\n - [Contributing](#contributing)\n - [License](#license)\n\n\n\n# react-instantsearch\n\nReact InstantSearch is an open-source React library that lets you create an instant search result experience using [Algolia][algolia-website]’s search API. It is part of the InstantSearch family:\n\n**React InstantSearch** | [InstantSearch.js][instantsearch-github] | [Vue InstantSearch][instantsearch-github] | [InstantSearch Android][instantsearch-android-github] | [InstantSearch iOS][instantsearch-ios-github]\n\n## Why\n\nYou should be using React InstantSearch if you want to:\n\n- Design search experiences with best practices\n- Customize your components at will\n- Follow React principles\n\nNote: If you are working with React Native, or otherwise do not use the DOM, check out `react-instantsearch-core` instead.\n\n## Installation\n\nReact InstantSearch is available on the npm registry. It relies on [`algoliasearch`](https://github.com/algolia/algoliasearch-client-javascript) to communicate with Algolia APIs.\n\n```sh\nyarn add algoliasearch react-instantsearch\n# or\nnpm install algoliasearch react-instantsearch\n```\n\n## Getting started\n\nUsing React InstantSearch is as simple as adding these components to your app:\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { liteClient as algoliasearch } from 'algoliasearch/lite';\nimport { InstantSearch, SearchBox, Hits } from 'react-instantsearch';\n\nconst searchClient = algoliasearch(\n 'latency',\n '6be0576ff61c053d5f9a3225e2a90f76'\n);\n\nconst App = () => (\n \n \n \n \n);\n```\n\n
\n\nTo learn more about the library, follow the [getting started guide][doc-getting-started].\n\n## Documentation\n\nThe documentation is available on [algolia.com/doc][doc].\n\n## Playground\n\nYou can get to know React InstantSearch on [this playground][doc-playground].\n\nStart by [adding components][doc-getting-started] and tweaking the display. Once you get more familiar with the library, you can learn more advanced concepts in [our guides][doc-guides].\n\n## Contributing\n\nWe welcome all contributors, from casual to regular 💙\n\n- **Bug report**. Is something not working as expected? [Send a bug report][contributing-bugreport].\n- **Feature request**. Would you like to add something to the library? [Send a feature request][contributing-featurerequest].\n- **Documentation**. Did you find a typo in the doc? [Open an issue][contributing-newissue] and we'll take care of it.\n- **Development**. If you don't know where to start, you can check the open issues that are [tagged easy][contributing-label-easy], the [bugs][contributing-label-bug] or [chores][contributing-label-chore].\n\nTo start contributing to code, you need to:\n\n1. [Fork the project](https://help.github.com/articles/fork-a-repo/)\n1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/)\n1. Install the dependencies: `yarn`\n\nPlease read [our contribution process](https://github.com/algolia/instantsearch/blob/master/CONTRIBUTING.md) to learn more.\n\n## License\n\nReact InstantSearch is [MIT licensed](../../LICENSE).\n\n\n\n[doc]: https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/\n[doc-getting-started]: https://www.algolia.com/doc/guides/building-search-ui/getting-started/react/\n[doc-guides]: https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/\n[doc-playground]: https://codesandbox.io/s/github/algolia/instantsearch/tree/master/examples/react/default-theme\n[algolia-website]: https://www.algolia.com/\n[instantsearch-github]: https://github.com/algolia/instantsearch\n[instantsearch-android-github]: https://github.com/algolia/instantsearch-android\n[instantsearch-ios-github]: https://github.com/algolia/instantsearch-ios\n[contributing-bugreport]: https://github.com/algolia/instantsearch/issues/new?template=BUG_REPORT.yml&labels=triage,Library%3A%20React+InstantSearch\n[contributing-featurerequest]: https://github.com/algolia/instantsearch/discussions/new?category=ideas&labels=triage,Library%3A%20React+InstantSearch&title=Feature%20request%3A%20\n[contributing-newissue]: https://github.com/algolia/instantsearch/issues/new?labels=triage,Library%3A%20React+InstantSearch\n[contributing-label-easy]: https://github.com/algolia/instantsearch/issues?q=is%3Aopen+is%3Aissue+label%3A%22Difficulty%3A+Easy%22+label%3A%22Library%3A%20React+InstantSearch%22\n[contributing-label-bug]: https://github.com/algolia/instantsearch/issues?q=is%3Aissue+is%3Aopen+label%3A%22Type%3A+Bug%22+label%3A%22Library%3A%20React+InstantSearch%22\n[contributing-label-chore]: https://github.com/algolia/instantsearch/issues?q=is%3Aissue+is%3Aopen+label%3A%22Type%3A+Chore%22+label%3A%22Library%3A%20React+InstantSearch%22\n","readmeFilename":"README.md"}
![\"React](\"https://github.com/algolia/instantsearch/blob/master/.github/react-instantsearch-banner.png?raw=true\")
\n \n![\"Edit](\"https://codesandbox.io/static/img/play-codesandbox.svg\")
\n \n