https://github.com/afosto/instant-search-client
Afosto InstantSearch.js client
https://github.com/afosto/instant-search-client
client instantsearch js react
Last synced: 8 months ago
JSON representation
Afosto InstantSearch.js client
- Host: GitHub
- URL: https://github.com/afosto/instant-search-client
- Owner: afosto
- License: mit
- Created: 2021-12-17T16:06:55.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-15T12:09:24.000Z (almost 4 years ago)
- Last Synced: 2024-08-10T10:56:32.888Z (almost 2 years ago)
- Topics: client, instantsearch, js, react
- Language: JavaScript
- Homepage: https://afosto.com/apps/instant-search/
- Size: 112 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Afosto Instant Search Client
This library is an Afosto search client plugin for the open-source InstantSearch.js library (powered by Algolia). With this plugin you can use the amazing widgets of the InstantSearch.js library, while communicating with the Afosto search API.
> Don't want to implement your own UI? You can also try our [Afosto instant search widget](https://github.com/afosto/instant-search-widget).
## Installation
### Basic
```sh
# Install with Yarn
yarn add @afosto/instant-search-client instantsearch.js
# Install with NPM
npm install @afosto/instant-search-client instantsearch.js
```
### React
```sh
# Install with Yarn
yarn add @afosto/instant-search-client react-instantsearch-dom
# Install with NPM
npm install @afosto/instant-search-client react-instantsearch-dom
```
### Browser
This library supports the **last two** versions of major browsers (Chrome, Edge, Firefox, Safari).
```html
```
## Getting started
> To use the client you will need an Afosto search engine. Don't have one yet? Sign up on [Afosto.com](https://afosto.com/register/) and follow [the guides in our documentation](https://afosto.com/docs/apps/instant-search/).
First you initialize the Afosto search client with your **search engine key**. This search engine key can be found in the [Afosto app](https://afosto.app/).
### ES6
```js
import { afostoInstantSearch } from '@afosto/instant-search-client';
const client = afostoInstantSearch('my-search-engine-key');
```
### CJS
```js
const { afostoInstantSearch } = require('@afosto/instant-search-client');
const client = afostoInstantSearch('my-search-engine-key');
```
### Browser
```js
const client = afostoInstantSearch('my-search-engine-key');
```
## Usage
**Note:** This library is a client for **InstantSearch.js** it does not contain any UI components by itself. You can use it with the InstantSearch.js library as shown below:
### Basic
```js
const client = afostoInstantSearch('my-search-engine-key');
const search = instantsearch({
indexName: 'my-index',
searchClient: client,
});
search.start();
```
For more information check the InstantSearch.js [documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/).
### Basic with settings
```js
const client = afostoInstantSearch('my-search-engine-key');
async function initSearch() {
const settings = await client.getSettings();
const [firstIndex] = settings.indexes || [];
const search = instantsearch({
indexName: firstIndex.alias,
searchClient: client,
});
// Do something with the settings.
// For example render filters dynamically.
search.start();
}
initSearch();
```
### React
You can use the initialized Afosto client with the [React InstantSearch](https://github.com/algolia/react-instantsearch) library.
```js
import { afostoInstantSearch } from '@afosto/instant-search-client';
import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-hooks-web';
const searchClient = afostoInstantSearch('my-search-engine-key');
const App = () => (
);
```
For more information check the React InstantSearch [documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/).
## Compatibility
- InstantSearch.js v4
- Node >= 14
## License
This project is licensed under the terms of the [MIT license](https://github.com/afosto/instant-search-client/blob/master/LICENSE).