import React from "react";
import { Provider, History, Trigger } from 'react-history-search';
import 'react-history-search/dist/index.css'; // import css
 
export const Main: React.FC = () => {
  const handleSearch = (value: string) => {
    alert(`Call some API to handle search keyword: ${value}`);
  };
  return (
    <>
      <History onClick={handleSearch}>
        <input id="some_unique_id"/>
      </History>
      <Trigger dataId="some_unique_id">
        <button onClick={handleSearch}>Search</button>
      </Trigger>
    </>
  );
};

import React from "react";
import { Provider, History, Trigger } from 'react-history-search';
import 'react-history-search/dist/index.css'; // import css
 
export const Main: React.FC = () => {
  const handleSearch = (value: string) => {
    alert(`Call some API to handle search keyword: ${value}`);
  };
  return (
    <Provider value={{ // more options, see below
      // pass options in here
      handleSearch,
      isEnterDown: true,
    }}>
      <History isHint isTabFill> // more props, see below
        <input id="some_unique_id"/>
      </History>
      // option isEnterDown is used, trigger maybe useless
      // <Trigger dataId="some_unique_id">
      //   <button>Search</button>
      // </Trigger>
    </Provider>
  );
};