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

*     
 *     
 *   
 * );
 */

const CurrentRefinementsWidget = props => (
  
    
  
);

export default connectCurrentRefinements(CurrentRefinementsWidget);

*     
 *     
 *   
 * );
 */

const ClearRefinementsWidget = props => (
  
    
  
);

export default connectCurrentRefinements(ClearRefinementsWidget);

*   'latency',
 *   '6be0576ff61c053d5f9a3225e2a90f76'
 * );
 *
 * const App = () => (
 *   
 *     
 *     
 *   
 * );
 */

export default connectHighlight(Highlight);

*     
 *   
 * );
 *
 * const App = () => (
 *   
 *     
 *     
 *   
 * );
 */

export default connectHighlight(Snippet);

.add('with Insights', () => {
    const insightsClient = (method, payload) =>
      action(`[InsightsClient] sent ${method} with payload`)(payload);
    const ProductWithInsights = connectHitInsights(insightsClient)(Product);

    function Product({ hit, insights }) {
      return (
        <div>
          
          <button>
              insights('clickedObjectIDsAfterSearch', {
                eventName: 'Add to cart',
              })
            }
          &gt;
            Add to cart
          </button>
        </div>
      );

.add('with Insights', () => {
    const insightsClient = (method, payload) =>
      action(`[InsightsClient] sent ${method} with payload`)(payload);
    const ProductWithInsights = connectHitInsights(insightsClient)(Product);
    function Product({ hit, insights }) {
      return (
        <div>
          
          <button>
              insights('clickedObjectIDsAfterSearch', {
                eventName: 'Add to cart',
              })
            }
          &gt;
            Add to cart
          </button>
        </div>
      );
    }

link: string;
};

type MovieHit = {
  actors: string[];
  color: string;
  genre: string[];
  image: string;
  objectID: string;
  score: number;
  title: string;
};

const stories = storiesOf('QueryRuleContext', module);

const StoryHits = connectHits(({ hits }: { hits: MovieHit[] }) => (
  <div>
    {hits.map(hit =&gt; (
      <div>
        <div>
          <img src="{hit.image}">
        </div>

        <div>
          <div>
            
          </div>
        </div>
      </div>
    ))}
  </div>
));

*
 * const searchClient = algoliasearch(
 *   'latency',
 *   '6be0576ff61c053d5f9a3225e2a90f76'
 * );
 * const App = () => (
 *   
 *     
 *   
 * );
 */

export default connectHits(Hits);

*   
 *     <menu>
 *   
 * );
 */

const MenuWidget = props =&gt; (
  
    <menu>
  
);

export default connectMenu(MenuWidget);
</menu></menu>

*   
 *     
 *   
 * );
 */

const MenuSelectWidget = props => (
  
    
  
);

export default connectMenu(MenuSelectWidget);