How to use react-instantsearch - 10 common examples

import {
  connectStateResults,
  connectHits,
} from 'react-instantsearch/connectors';
// import './App.css';

const Analytics = connectStateResults(({ searchResults }) => {
  window.aa('initSearch', {
    getQueryID: () => searchResults && searchResults._rawResults[0].queryID,
  });

  return null;
});

const Hits = connectHits(
  connectStateResults(({ hits, searchResults }) => (
    <div>
      {hits.map((hit, index) =&gt; (
        <div>
          
          <button> {
              window.aa('click', {
                objectID: hit.objectID,
                position:
                  searchResults.hitsPerPage * searchResults.page + index + 1,
              });
            }}
          &gt;
            Click event
          </button>
          </div></div>

import React from 'react';
import { groupBy, filter } from 'lodash';
import { Measures, NoMeasure } from './measure';
import { connectStateResults } from 'react-instantsearch/connectors';

import './../../scss/theme.css';
  
const Theme = connectStateResults(({ hit:theme, searchState: { query } }) => {
  let { measures } = theme;

  measures = filter(measures, m => m.title.match(new RegExp(query, 'gi')));
  let grouped = groupBy(measures, 'status');
  measures = (grouped['DONE'] || [])
                .concat(grouped['IN_PROGRESS'] || [])
                .concat(grouped['UPCOMING'] || []);
  
  if (query && !measures.length) {
    // no matching measures for this keyword query
    // return nothing so it doesn't render
    return null;
  }
  
  return (
    <article></article>

) : null

SearchResults.propTypes = {
  searchState: PropTypes.shape({
    // from connectStateResults
    query: PropTypes.string
  }),
  resultsTitle: PropTypes.string,
  onSuggestionClick: PropTypes.func.isRequired,
  // hits: PropTypes.object, // from react-instantsearch
  searchResults: PropTypes.object // from connectStateResults
}

export default connectStateResults(SearchResults)

onPress={() =>
        /* eslint-disable new-cap */
        Actions.Filters({
          searchState,
          onSearchStateChange,
        })
      }
      /* eslint-enable new-cap */
      title={`Filters (${items.length})`}
      color="#162331"
    />
  )
);
const VirtualRange = connectRange(() => null);
const VirtualRefinementList = connectRefinementList(() => null);
const VirtualMenu = connectMenu(() => null);

latestVersion: string,
  lastUpdatedAt: number,
  isLoading: boolean,
};

type Props = {
  packageName: string,
  children: (info: NpmResult) => React$Node,
  isOnline: boolean,
};

type State = {
  refresh: boolean,
};

const FilterByIds = connectRefinementList(() => null);

const Result = connectHits(({ hits, packageName, children }: any) => {
  // InstantSearch is meant to deal with multiple results, but in this case,
  // we just want info on the 1 result.
  const [hit] = hits;

  if (!hit || hit.name !== packageName) {
    // TODO: Presumably there's a HOC to figure out loading state, I should
    // use that instead of just assuming if it doesn't exist, it's loading.
    return children({
      isLoading: true,
    });
  }

  const info = {
    name: hit.name,

<button>
        /* eslint-disable new-cap */
        Actions.Filters({
          searchState,
          onSearchStateChange,
        })
      }
      /* eslint-enable new-cap */
      title={`Filters (${items.length})`}
      color="#162331"
    /&gt;
  )
);
const VirtualRange = connectRange(() =&gt; null);
const VirtualRefinementList = connectRefinementList(() =&gt; null);
const VirtualMenu = connectMenu(() =&gt; null);
</button>

key={`Hit-${hit.objectID}-${i}`}
            hit={hit}
            onClick={onSuggestionClick}
          />
        ))}
      
    
  )
}

ResultsList.propTypes = {
  hits: PropTypes.array, // from connectHits
  onSuggestionClick: PropTypes.func // from UsersSearch
}

export default connectHits(ResultsList)

key={`Hit-${hit.objectID}-${i}`}
          id={hit.objectID}
          hit={hit}
          onClick={onSuggestionClick}
        />
      ))}
    
  )
}

ResultsList.propTypes = {
  hits: PropTypes.array, // from connectHits
  onSuggestionClick: PropTypes.func // from UsersSearch
}

export default connectHits(ResultsList)

} from 'react-instantsearch/dom';
import {
  connectStateResults,
  connectHits,
} from 'react-instantsearch/connectors';
// import './App.css';

const Analytics = connectStateResults(({ searchResults }) => {
  window.aa('initSearch', {
    getQueryID: () => searchResults && searchResults._rawResults[0].queryID,
  });

  return null;
});

const Hits = connectHits(
  connectStateResults(({ hits, searchResults }) => (
    <div>
      {hits.map((hit, index) =&gt; (
        <div>
          
          <button> {
              window.aa('click', {
                objectID: hit.objectID,
                position:
                  searchResults.hitsPerPage * searchResults.page + index + 1,
              });
            }}
          &gt;
            Click event
          </button></div></div>

isLoading: boolean,
};

type Props = {
  packageName: string,
  children: (info: NpmResult) => React$Node,
  isOnline: boolean,
};

type State = {
  refresh: boolean,
};

const FilterByIds = connectRefinementList(() => null);

const Result = connectHits(({ hits, packageName, children }: any) => {
  // InstantSearch is meant to deal with multiple results, but in this case,
  // we just want info on the 1 result.
  const [hit] = hits;

  if (!hit || hit.name !== packageName) {
    // TODO: Presumably there's a HOC to figure out loading state, I should
    // use that instead of just assuming if it doesn't exist, it's loading.
    return children({
      isLoading: true,
    });
  }

  const info = {
    name: hit.name,
    latestVersion: hit.version,
    lastUpdatedAt: hit.modified,