React-instantsearch: How to show results only when user types in the search box?

[kaloraat]

I just went through this article and it is fantastic but I want to show the results only when user starts to type something in the searchbox.

But the tutorial shows a list of results already on display! I don't remember visiting a single site on the internet that has a search box with results already pre-populated? I just can't understand why you would create a tutorial like that... but I agree that it is a great idea for a tutorial :) since users can see the content on the page as they land, and all they do is filter the existing content using serachbox... huh!

Can anyone help me understand how to show the results only when user starts typing and I would also like to add a link on the search results, that will take users to that particular product page.. Thanks!

[Haroenv]

You can use connectStateResults to get the query the user typed, and not render the <Hits /> in case the searchState.query === ''.

See also this guide about the topic

[kaloraat]

Hi Haroenv, thanks for your reply. I am new to it and just cant seem to figure it out. I was able to follow the official tutorial but... once i add connectStateResults, I don't know how to go further.. Can you please help... here is my code:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { InstantSearch, Hits, SearchBox, Highlight, HitsPerPage, Configure } from 'react-instantsearch/dom';
import { connectStateResults } from 'react-instantsearch/connectors';

const Search = () => {
    return (
        <div className="container">
            <SearchBox />
            <Hits hitComponent={Product} />
        </div>
    );
};

const Product = ({ hit }) => {
    return (
        <div style={{ marginTop: '10px' }}>
            <span className="hit-name">
                <a href="#">
                    <Highlight attribute="name" hit={hit} />
                </a>
            </span>
        </div>
    );
};

const Content = connectStateResults(
    ({ searchState }) =>
        searchState && searchState.query ? <div>The query {searchState.query} exists</div> : <div>No query</div>
);

const App = () => (
    <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search">
        <Configure hitsPerPage={20} />
        <Search />
        <Content />
    </InstantSearch>
);

export default App;

Link to the screenshot 1
Link to the screeshot 2

[Haroenv]

You're able to do the following:

import React, { Component } from "react";
import {
  InstantSearch,
  Hits,
  SearchBox,
  Highlight,
  Configure
} from "react-instantsearch/dom";
import { connectStateResults } from "react-instantsearch/connectors";

const Product = ({ hit }) => {
  return (
    <div style={{ marginTop: "10px" }}>
      <span className="hit-name">
        <a href="#">
          <Highlight attribute="name" hit={hit} />
        </a>
      </span>
    </div>
  );
};

const Results = connectStateResults(
  ({ searchState }) =>
    searchState && searchState.query ? (
      <Hits hitComponent={Product} />
    ) : //<div>No query</div>
    null
);

const Search = () => {
  return (
    <div className="container">
      <SearchBox />
      <Results />
    </div>
  );
};

const App = () => (
  <InstantSearch
    appId="latency"
    apiKey="6be0576ff61c053d5f9a3225e2a90f76"
    indexName="instant_search"
  >
    <Configure hitsPerPage={20} />
    <Search />
  </InstantSearch>
);

export default App

see this sandbox: https://codesandbox.io/s/y2k9mv02xv

[kaloraat]

@Haroenv
You are an absolute legend! Seriously, Cant thank you enough! Now I understand how it works...

Cheers!

[Haroenv]

With pleasure!

[jameskennethrobinson]

@Haroenv Thank you!