![\"Afosto\"](\"https://content.afosto.io/5719193282412544/brand/AFO-Logo-compleet-kleur-RGBat4x.png?w=268\"){kind=logo}
\n\n \n
\n ![\"npm](\"https://img.shields.io/npm/v/@afosto/instant-search-client.svg\")
\n ![\"License\"](\"https://img.shields.io/badge/license-MIT-informational\"){kind=icon}
\nThis 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.\n
\n![](\"https://qcqcdn.com/afosto/instant_search_demo_page_7dd20c983c/instant_search_demo_page_7dd20c983c.gif\")
\n\n\n> Don't want to implement your own UI? You can also try our [Afosto instant search widget](https://github.com/afosto/instant-search-widget).\n\n\n## Installation\n\n### Basic\n\n```sh\n# Install with Yarn\nyarn add @afosto/instant-search-client instantsearch.js\n\n# Install with NPM\nnpm install @afosto/instant-search-client instantsearch.js\n```\n\n### React\n\n```sh\n# Install with Yarn\nyarn add @afosto/instant-search-client react-instantsearch-dom\n\n# Install with NPM\nnpm install @afosto/instant-search-client react-instantsearch-dom\n```\n\n\n### Browser\n\nThis library supports the **last two** versions of major browsers (Chrome, Edge, Firefox, Safari).\n\n```html\n\n\n```\n\n## Getting started\n\n> 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/).\n\nFirst 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/).\n\n### ES6\n\n```js\nimport { afostoInstantSearch } from '@afosto/instant-search-client';\n\nconst client = afostoInstantSearch('my-search-engine-key');\n```\n\n### CJS\n\n```js\nconst { afostoInstantSearch } = require('@afosto/instant-search-client');\n\nconst client = afostoInstantSearch('my-search-engine-key');\n```\n\n### Browser\n\n```js\nconst client = afostoInstantSearch('my-search-engine-key');\n```\n\n## Usage\n\n**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:\n\n### Basic\n\n```js\nconst client = afostoInstantSearch('my-search-engine-key');\nconst search = instantsearch({\n indexName: 'my-index',\n searchClient: client,\n});\n\nsearch.start();\n```\n\nFor more information check the InstantSearch.js [documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/).\n\n### Basic with settings\n\n```js\nconst client = afostoInstantSearch('my-search-engine-key');\n\nasync function initSearch() {\n const settings = await client.getSettings();\n const [firstIndex] = settings.indexes || [];\n \n const search = instantsearch({\n indexName: firstIndex.alias,\n searchClient: client,\n });\n \n // Do something with the settings.\n // For example render filters dynamically.\n\n search.start(); \n}\n\ninitSearch();\n```\n\n### React\n\nYou can use the initialized Afosto client with the [React InstantSearch](https://github.com/algolia/react-instantsearch) library.\n\n```js\nimport { afostoInstantSearch } from '@afosto/instant-search-client';\nimport { InstantSearch, SearchBox, Hits } from 'react-instantsearch-hooks-web';\n\nconst searchClient = afostoInstantSearch('my-search-engine-key');\n\nconst App = () => (\n