react-history-search v0.0.5

History Keyword will be saved and hint

This is my component supported:

Features

• Save search history to local storage
• Suggest history searched

Usage/Examples

Example 1: No options

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>
    </>
  );
};

Example 2: With some options (recommend)

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>
  );
};

Options

Components

Example

You can download example

Thanks to

• Contributor kmacoders for your support 💕
• react-autocomplete-hint package for hint 😜