$ npm i algoliasearch algolia-react-autocomplete"import algoliasearch from "algoliasearch";
import Autocomplete from "algolia-react-autocomplete";
import "algolia-react-autocomplete/build/css/index.css";
// init algoliasearch sdk and indexes
const client = algoliasearch('myApplicationID', 'myApiKey');
const indexes = [
{
source: this.client.initIndex("players"),
displayKey: 'name',
templates: {
header: () => <h2 className="aa-suggestions-category"> Players</h2>
suggestion: (suggestion, isSelected) => <div data-selected={isSelected}> {suggestion.name} </div>
}
},
]
// in your render method
<Autocomplete indexes={indexes} onSelectionChange={selectedSuggestion => console.log(selectedSuggestion)>
<input key="input" type="search" className="aa-input-search" autocomplete="off" />
</Autocomplete>$ git clone https://github.com/tkrugg/algolia-react-autocomplete.git
$ cd algolia-react-autocomplete
$ npm i
$ npm startThere is a demo hosted here: https://codesandbox.io/s/kk4v5nqrz5
why do I have to install algoliasearch myself, can't I just pass in my credentials inside the component
You're right. This component makes assumptions on the algolia sdk it's being passed, embedding the lib is safer. But I'm suspecting the user might be using this same sdk as a data source for other components. This is more flexible.
CSS classes are easier and faster to override. With inline styles we'd have to expose every style attribute under that piece of DOM. Plus, I just hate inline styles 🧌. Please try to change my mind, don't give up on me.
This component was started off this boilerplate: https://github.com/DimiMikadze/create-react-library
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent