How to use the react-instantsearch/connectors.connectHits function in react-instantsearch

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 prescottprue / fireadmin / src / components / CollectionSearch / ResultsList.js View on Github external
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)
github prescottprue / fireadmin / src / components / UsersSearch / ResultsList.js View on Github external
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)
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) =&gt; (
        <div>
          
          <button> {
              window.aa('click', {
                objectID: hit.objectID,
                position:
                  searchResults.hitsPerPage * searchResults.page + index + 1,
              });
            }}
          &gt;
            Click event
          </button></div></div>
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,
github algolia / react-instantsearch / examples / react-native-query-suggestions / App.js View on Github external
removeSuggestions={removeSuggestions}
      hits={hits}
      onEndReached={() =&gt; {
        if (hasMore) {
          refine();
        }
      }}
    /&gt;
  )
);

const ResultsHits = connectHits(({ hits, removeSuggestions }) =&gt; (
  
));

const SuggestionsHits = connectHits(({ hits, onPressItem }) =&gt; (
   {
      const category =
        index === 1
          ? item.instant_search.facets.exact_matches.categories[0].value
          : null;
      return (
        
      );
    }}
    keyExtractor={(item, index) =&gt; item.objectID + index}
github Haroenv / dev-ui / ui / components / Search.jsx View on Github external
/&gt;
    ))}
  
);

Hits.propTypes = {
  hits: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      versions: PropTypes.objectOf(PropTypes.string),
    }),
  ),
  onAddClick: PropTypes.func,
};

const ConnectedHits = connectHits(Hits);

const Search = ({ onAddClick }) =&gt; (
  
    
    
    
  
);
github EnMarche / transformer.en-marche.fr / src / js / components / results.js View on Github external
render() {
        let { hits, locale, isFiltering } = this.props
        if (!hits.length) {
            return 
        } else {
            hits.sort((a, b) =&gt;
                a.titles[locale].localeCompare(b.titles[locale])
            )
            return hits.map(hit =&gt; (
                
            ))
        }
    }
}

ResultsList = connectHits(ResultsList)

class Results extends Component {
    shouldComponentUpdate({
        searchState: { menu: nextMenu, refinementList: nextList = {} },
        profiles: nextProfiles,
    }) {
        if (
            typeof nextMenu === 'undefined' ||
            typeof this.props.searchState.menu === 'undefined'
        ) {
            return false
        }
        let {
            searchState: { menu, refinementList = {} },
            profiles,
            locale,
github wp-graphql / docs.wpgraphql.com / src / components / SiteSearch / index.js View on Github external
type="search"
                className="certain-category-icon"
              /&gt;
            }
          /&gt;
        
      
    );
  }


}

const SearchInput = ({currentRefinement, refine, hits}) =&gt; ;

const ConnectedSearch = connectSearchBox(connectHits(SearchInput));

class Search extends Component{

  state = {
    shouldRender: false
  };

  componentDidMount() {
    this.setState({
      shouldRender: true,
    })
  }

  render() {
    const { shouldRender } = this.state;
    return ! shouldRender ? null : (
github algolia / react-instantsearch / examples / react-native-query-suggestions / App.js View on Github external
const ResultsInfiniteHits = connectInfiniteHits(
  ({ hits, hasMore, refine, removeSuggestions }) =&gt; (
     {
        if (hasMore) {
          refine();
        }
      }}
    /&gt;
  )
);

const ResultsHits = connectHits(({ hits, removeSuggestions }) =&gt; (
  
));

const SuggestionsHits = connectHits(({ hits, onPressItem }) =&gt; (
   {
      const category =
        index === 1
          ? item.instant_search.facets.exact_matches.categories[0].value
          : null;
      return (