Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meilisearch/meilisearch-react
https://github.com/meilisearch/meilisearch-react
client instantsearch meilisearch react-search react-search-component
Last synced: 28 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/meilisearch/meilisearch-react
- Owner: meilisearch
- License: mit
- Created: 2020-07-07T14:16:34.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-20T13:14:49.000Z (9 months ago)
- Last Synced: 2024-08-04T01:15:24.087Z (4 months ago)
- Topics: client, instantsearch, meilisearch, react-search, react-search-component
- Homepage: https://www.meilisearch.com/
- Size: 38.1 KB
- Stars: 190
- Watchers: 6
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-meilisearch - React
README
Meilisearch React
Meilisearch |
Meilisearch Cloud |
Documentation |
Discord |
Roadmap |
Website |
FAQ
⚡ How to integrate a front-end search bar in your React application using Meilisearch
**Meilisearch** is an open-source search engine. [Discover what Meilisearch is!](https://github.com/meilisearch/meilisearch)
This repository describes the steps to integrate a relevant front-end search bar with a search-as-you-type experience!
## ⚡ Supercharge your Meilisearch experience
Say goodbye to server deployment and manual updates with [Meilisearch Cloud](https://www.meilisearch.com/cloud?utm_campaign=oss&utm_source=github&utm_medium=meilisearch-ruby). Get started with a 14-day free trial! No credit card required.
## Installation
To integrate a front-end search bar, you need to install two packages:
- the open-source [React InstantSearch](https://github.com/algolia/instantsearch/) library powered by Algolia that provides all the front-end tools you need to highly customize your search bar environment.
- the Meilisearch client [instant-meilisearch](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch) to establish the communication between your Meilisearch instance and the React InstantSearch library.
_Instead of reinventing the wheel, we have opted to reuse the InstantSearch library for our own front-end tooling. We will contribute upstream any improvements that may result from our adoption of InstantSearch._
Run:
```bash
yarn add react-instantsearch @meilisearch/instant-meilisearch
# or
npm install react-instantsearch @meilisearch/instant-meilisearch
# or
pnpm add react-instantsearch @meilisearch/instant-meilisearch
```
NB: If you don't have any Meilisearch instance running and containing your data, you should take a look at this [getting started page](https://www.meilisearch.com/docs/learn/getting_started/installation).
## Getting Started
Thanks to the open-source React InstantSearch library, you can add these components to your application:
```js
import React from 'react';
import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
const { searchClient } = instantMeiliSearch(
'https://ms-adf78ae33284-106.lon.meilisearch.io',
'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303'
);
const App = () => (
);
const Hit = ({ hit }) => ;
export default App
```
🚀 For a full getting started example, please take a look at this CodeSandbox:
[](https://codesandbox.io/p/sandbox/eager-dust-f98w2w)
💡 If you have never used React InstantSearch before, we recommend reading this [getting started documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/).
## Customization and Documentation
- The open-source React InstantSearch library is widely used and well documented in the [Algolia documentation](https://www.algolia.com/doc/api-reference/widgets/react/). It provides all the widgets to customize and improve your search bar environment in your React application.
- The [instant-meilisearch documentation](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch) to add some customization.
- The [Meilisearch documentation](https://www.meilisearch.com/docs/).
**Meilisearch** provides and maintains many **SDKs and Integration tools** like this one. We want to provide everyone with an **amazing search experience for any kind of project**. If you want to contribute, make suggestions, or just know what's going on right now, visit us in the [integration-guides](https://github.com/meilisearch/integration-guides) repository.