Don't want to implement your own UI? You can also try our Afosto instant search widget.

Installation

Basic

# Install with Yarn
yarn add @afosto/instant-search-client instantsearch.js

# Install with NPM
npm install @afosto/instant-search-client instantsearch.js

React

# 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).

<script src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-client@latest/dist/afosto-instant-search.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js"></script>

Getting started

To use the client you will need an Afosto search engine. Don't have one yet? Sign up on Afosto.com and follow the guides in our documentation.

First you initialize the Afosto search client with your search engine key. This search engine key can be found in the Afosto app.

ES6

import { afostoInstantSearch } from '@afosto/instant-search-client';

const client = afostoInstantSearch('my-search-engine-key');

CJS

const { afostoInstantSearch } = require('@afosto/instant-search-client');

const client = afostoInstantSearch('my-search-engine-key');

Browser

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

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.

Basic with settings

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 library.

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 = () => (
  <InstantSearch searchClient={searchClient} indexName="my-index">
    <SearchBox />
    <Hits />
  </InstantSearch>
);

For more information check the React InstantSearch documentation.

Compatibility

• InstantSearch.js v4
• Node >= 14

License

This project is licensed under the terms of the MIT license.