How to use react-instantsearch-dom - 10 common examples

import React from 'react';

import algoliasearch from 'algoliasearch/lite';
import { Configure, connectAutoComplete, Index, InstantSearch } from 'react-instantsearch-dom';

import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete';

const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');

interface ISearchInputProps {
    isHome?: boolean;
}

const AutoComplete = connectAutoComplete(CustomAutoComplete);

export const SearchInput: React.FC = ({ isHome }) => (
     {
            // console.log('searchState', searchState);
        }}
    >
        
        
        
        
    
);

import algoliasearch from 'algoliasearch/lite'
import React, { createRef, useMemo, useState } from 'react'
import { connectStateResults, Index, InstantSearch } from 'react-instantsearch-dom'
import { useOnClickOutside } from 'hooks'
import Hits from './Hits'
import Input from './Input'
import { HitsWrapper, PoweredBy, Root } from './styles'

const Results = connectStateResults(
  ({ searching, searchState: state, searchResults: res }) =>
    (searching &amp;&amp; <div>Searching...</div>) ||
    (res &amp;&amp; res.nbHits === 0 &amp;&amp; <div>No results for '{state.query}'</div>)
)

const Stats = connectStateResults(
  ({ searchResults: res }) =&gt;
    res &amp;&amp; res.nbHits &gt; 0 &amp;&amp; `${res.nbHits} result${res.nbHits &gt; 1 ? `s` : ``}`
)

export default function Search({ indices, collapse = true, hitsAsGrid }) {
  const ref = createRef()
  const [query, setQuery] = useState(``)
  const [focus, setFocus] = useState(false)
  const appId = process.env.GATSBY_ALGOLIA_APP_ID
  const searchKey = process.env.GATSBY_ALGOLIA_SEARCH_KEY
  // useMemo prevents the searchClient from being recreated on every render.
  // Avoids unnecessary XHR requests (see https://tinyurl.com/yyj93r2s).
  const searchClient = useMemo(() =&gt; algoliasearch(appId, searchKey), [
    appId,
    searchKey,
  ])

const SearchBox = ({ currentRefinement, refine }) => (
  <div>
    <form role="search" action="" novalidate="">
      <input value="{currentRefinement}" type="search"> refine(event.currentTarget.value)}
      /&gt;
    </form>
  </div>
);

export const CustomSearchBox = connectSearchBox(SearchBox);

// on page load do not display
const Hits = ({ hits }) =&gt; (
  // if parent component set is type, render, otherwise hide
  <ul>
    {hits.length &lt; 1 ? <li>No search results found</li> : ''}
    {hits.map((hit) =&gt; (
      <li>
        <a href="{hit.fields.slug}">
          <span>
          </span></a><p><a href="{hit.fields.slug}">
        </a>
      </p></li>

      //  Work on highlighting
      // /////////////////////////////////////////////////</ul>

server.get('/', async (req, res) => {
  const { App, props } = createApp();

  // URLSync
  const searchState = {
    query: 'iPhone',
    refinementList: {
      brand: ['Apple'],
    },
  };

  const resultsState = await findResultsState(App, {
    ...props,
    searchState,
  });

  const initialState = {
    resultsState,
    searchState,
  };

  const body = ReactDOM.renderToString();

  res.send(
    template({
      title: 'Hello World from the server',
      initialState: JSON.stringify(initialState),
      body,

import { connectHits, createConnector, InstantSearch } from "react-instantsearch-dom";

const searchClient = algoliasearch("Q9QS39IFO0", "153e21a16f649c7f9ec28185683415cf");

export class Search extends React.Component<{}, {}> {
  public render() {
    return (
      
        
      
    );
  }
}

// Mostly magic to me: https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/react/
const connectWithQuery = createConnector({
  displayName: "WidgetWithQuery",
  getProvidedProps(props, searchState) {
    // Since the `attributeForMyQuery` searchState entry isn't
    // necessarily defined, we need to default its value.
    const currentRefinement = searchState.attributeForMyQuery || "";

    // Connect the underlying component with the `currentRefinement`
    return { currentRefinement };
  },
  refine(props, searchState, nextRefinement) {
    // When the underlying component calls its `refine` prop,
    // we update the searchState with the provided refinement.
    return {
      // `searchState` represents the search state of *all* widgets. We need to extend it
      // instead of replacing it, otherwise other widgets will lose their respective state.
      ...searchState,

};
}

const SearchBox = ({ currentRefinement, refine }) => (
   refine(event.currentTarget.value)}
  />
);

const CustomSearchBox = connectSearchBox(SearchBox);

const Content = connectStateResults(
  ({ searchState, searchResults }) =>
    searchResults && searchResults.nbHits !== 0
      ? null
      : <div>
          No plugins were found matching <em>{searchState.query}</em>
        </div>
);


const Hit = ({ hit }) =&gt; {
  if (hit.api &amp;&amp; hit.api.length) {
    if (SemverJS.split(hit.api[0].from).major == '3') {
      return (
        
          
            <a href="{`https://poggit.pmmp.io/p/${hit.project_name}`}"></a>

function parseHighlightedAttribute({
  preTag = HIGHLIGHT_TAGS.highlightPreTag,
  postTag = HIGHLIGHT_TAGS.highlightPostTag,
  highlightedValue,
}) {
  const splitByPreTag = highlightedValue.split(preTag);
  const firstValue = splitByPreTag.shift();
  const elements =
    firstValue === '' ? [] : [{ value: firstValue, isHighlighted: false }];

  if (postTag === preTag) {
    let isHighlighted = true;
    splitByPreTag.forEach(split => {
      elements.push({ value: split, isHighlighted });
      isHighlighted = !isHighlighted;
    });
  } else {
    splitByPreTag.forEach(split => {
      const splitByPostTag = split.split(postTag);

function parseHighlightedAttribute({
  preTag = HIGHLIGHT_TAGS.highlightPreTag,
  postTag = HIGHLIGHT_TAGS.highlightPostTag,
  highlightedValue,
}) {
  const splitByPreTag = highlightedValue.split(preTag);
  const firstValue = splitByPreTag.shift();
  const elements =
    firstValue === '' ? [] : [{ value: firstValue, isHighlighted: false }];

  if (postTag === preTag) {
    let isHighlighted = true;
    splitByPreTag.forEach(split => {
      elements.push({ value: split, isHighlighted });
      isHighlighted = !isHighlighted;
    });
  } else {
    splitByPreTag.forEach(split => {

}

const SearchBox = connectSearchBox(
  ({ currentRefinement, onFocus, refine }) => (
     refine(e.target.value)}
      onFocus={onFocus}
    />
  )
);

const Results = connectStateResults((comp) =>
  comp.searchResults && comp.searchResults.nbHits > 0
    ? (comp.children as any)
    : (`No results for '${comp.searchState.query}'` as any)
);

const Stats = connectStateResults(
  (comp) =>
    comp.searchResults &&
    comp.searchResults.nbHits > 0 &&
    (`${comp.searchResults.nbHits} result${
      comp.searchResults.nbHits > 1 ? `s` : ``
    }` as any)
);

const DocHit = (siteUrl: string, clickHandler: () => void) => ({
  hit,

Index,
  Hits,
  connectStateResults,
} from 'react-instantsearch-dom'
import algoliasearch from 'algoliasearch/lite'
import cn from 'classnames'
import { Algolia } from 'styled-icons/fa-brands/Algolia'

import Input from './input'
import * as hitComps from './hitComps'

const IndexResults = connectStateResults(({ searchResults, children }) =>
  searchResults && searchResults.nbHits !== 0 ? children : null
)

const AllResults = connectStateResults(
  ({ allSearchResults, searching, children }) => {
    const hasResults =
      allSearchResults &&
      Object.values(allSearchResults).some(results => results.nbHits > 0)

    return !hasResults ? (
      <div>
        {searching ? (
          <div>
            <h5 aria-hidden="">
            <p>Searching the catacombs...</p>
          </h5></div>
        ) : (
          <div>
            <h5 aria-hidden="">
            <p>Couldn’t find any results!</p></h5></div></div>