Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kant01ne/autocomplete-react
Simple autocomplete module for react
https://github.com/kant01ne/autocomplete-react
Last synced: 14 days ago
JSON representation
Simple autocomplete module for react
- Host: GitHub
- URL: https://github.com/kant01ne/autocomplete-react
- Owner: kant01ne
- Created: 2018-03-27T13:03:28.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-02T12:07:04.000Z (almost 7 years ago)
- Last Synced: 2024-11-02T13:11:42.470Z (2 months ago)
- Language: JavaScript
- Size: 185 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Autocomplete-react Algolia
## Install
The `autocomplete-react` module should be available on npm soon (or maybe not?)
```shell
yarn add autocomplete-react
```
## Usage
In order to use this React Autocomplete module for Algolia you will need an ALgolia account.
You can signup with [Algolia account here](https://www.algolia.com/users/sign_up) and create your first indexes.
Alternatively if you just want to play around with this module you can an existing data set you can simply use public data provided by algolia. You'll find predefined set of data free to use on the [algolia/dataset github repository](https://github.com/algolia/datasets)
To add an Autocomplete component to your website you will need your index name, appId and apiKey provided by Algolia. You can find those informations in your [Algolia dashboard](https://www.algolia.com/apps/_/api-keys).
### Basic usage
In your React application you can use the following code:
```jsx
```
### Display custom hits
By default `` tag will display your hits (results from search) in a list showing the name attribute.
It is likely that you will want to display your Hits differentely. To achieve this goal let's start by writing a `customHitsDisplay` function:
```jsx
function customHitsDisplay(hit, key) {
return(
{hit.title}
{hit.shortDescription}
);
}
```
React needs every elements in a `map` to be populated with a key in order to identify which items have changed( see [official React doc](https://reactjs.org/docs/lists-and-keys.html)). To prevent from the React noisy warning to happen, make sure to add a `key` attribute to your custom rendering function.
Then in your `Autocomplete` component:
```jsx
```
### Highlight results
If you want to show highlighted results you can modify your customHitsDsplay method using the `` component:
```jsx
function customHitsDisplay(hit, key) {
return(
)
);
}
```
If you do not provide a `tag` prop to the `Highlight` component, by default it will highlight with an `` html tag.
### Sticky SearchBox
If you want your seachBox to stick to the top of the page while your users scroll down the page you can simply wrap your SearchBox element in a StickySearchBox component:
```jsx
```
### Multi index support
This module supports for multiple indexes:
```jsx
```
### Custom page rendering
You can arrange and style what you want to display as you which, creating nested components and overriding the current style of the library:
```jsx
Some title
```
### Autocomplete/ How does it work
Before the first rendering, under the hood the Autocomplete component populates its children elements with aditional props.
The AutoComplete element adds `appId` and `apiKey` to each of its children `Index`. It will also insert its state value as a props in each Index.
The autoComplete element will propagate an `onSearchBoxInput` function to any `SearchBox` provided in order to lift the value state up from `SearchBox` to `AutoComplete` which will then propagate this value to its `Index` children in order to reload the Hits.
Take a look at AutoComplete rendering function to get the big picture of where the magic happens.
## Contribute
Clone the current repo locally:
```shell
git clone [email protected]:Skaelv/autocomplete-react.git
cd autocomplete-react/
yarn install
yarn start
```
To run the test suit:
```shell
yarn test
```
- Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
- Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
- Fork the project.
- Start a feature/bugfix branch.
- Make sure you add your exemple to the App.js file containing all examples IF necessary
- Commit and push until you are happy with your contribution.
- Make sure to add tests for it. This is important so we don't break it in a future version unintentionally.