How to use react-instantsearch - 10 common examples

To help you get started, we’ve selected a few react-instantsearch examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github algolia / search-insights.js / examples / react-instantsearch / src / App.js View on Github external
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) => (
        <div key={hit.objectID}>
          <Highlight attributeName="name" hit={hit} />
          <button
            onClick={() => {
              window.aa('click', {
                objectID: hit.objectID,
                position:
                  searchResults.hitsPerPage * searchResults.page + index + 1,
              });
            }}
          >
            Click event
          </button>
          <button
github EnMarche / transformer.en-marche.fr / src / js / components / theme.js View on Github external
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 className="theme">
github prescottprue / fireadmin / src / components / UsersSearch / SearchResults.js View on Github external
<ResultsList onSuggestionClick={onSuggestionClick} />
    </div>
  ) : 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)
github algolia / react-instantsearch / examples / react-native / src / Home.js View on Github external
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);
github joshwcomeau / guppy / src / components / DependencyManagementPane / DependencyInfoFromNpm.js View on Github external
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,
github algolia / react-instantsearch / examples / react-native / src / Home.js View on Github external
<Button
      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);
github prescottprue / fireadmin / src / components / CollectionSearch / ResultsList.js View on Github external
key={`Hit-${hit.objectID}-${i}`}
            hit={hit}
            onClick={onSuggestionClick}
          />
        ))}
      </MenuList>
    </div>
  )
}

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

export default connectHits(ResultsList)
github prescottprue / fireadmin / src / components / UsersSearch / ResultsList.js View on Github external
key={`Hit-${hit.objectID}-${i}`}
          id={hit.objectID}
          hit={hit}
          onClick={onSuggestionClick}
        />
      ))}
    </List>
  )
}

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

export default connectHits(ResultsList)
github algolia / search-insights.js / examples / react-instantsearch / src / App.js View on Github external
} 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) => (
        <div key={hit.objectID}>
          <Highlight attributeName="name" hit={hit} />
          <button
            onClick={() => {
              window.aa('click', {
                objectID: hit.objectID,
                position:
                  searchResults.hitsPerPage * searchResults.page + index + 1,
              });
            }}
          >
            Click event
          </button>
github joshwcomeau / guppy / src / components / DependencyManagementPane / DependencyInfoFromNpm.js View on Github external
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,