React-search-highlight NPM

react-search-highlight

react-search-highlight is a light weight react package to highlight static/dynamic search for auto completion

Installation

install it using npm or yarn to include it in your own React project

You will also need to import css modules in root your project before using it. dist/react-search-highlight.cjs.development.css

npm install react-search-highlight

or:

yarn add react-search-highlight

Usage

You can either use the hook:

import {
  PopOverList,
  PopOverOption,
  PopOverOptionText,
  Props,
  ReactSearchHighlightProvider,
  SearchBar,
  STRING_MATCHING,
  useReactSearchHighlight,
  Wrapper
} from 'react-search-highlight';
import 'react-search-highlight/dist/react-search-highlight.cjs.development.css';

import TEST_DATA from '../data.json';

const Template = () => {
  const {suggestions, isResultsEmpty} = useReactSearchHighlight();
  return (
    <Wrapper>
      <SearchBar
        data={TEST_DATA} // need to provide data here
        keysToSearch={['heading', 'title']} // keys to search from data object
        placeholder="search docs"
        matchingAlgorithm={STRING_MATCHING}
        ref={ref}
      />
      <PopOverList>
        {suggestions?.map((item, index) => (
          <PopOverOption
            optionIndex={index}
            key={index}
            onClick={() => alert(index)}
          >
            ⚡️
            <PopOverOptionText as="h3" value={item.heading} />
            <PopOverOptionText as="h5" value={item.title} />
          </PopOverOption>
        ))}
        {isResultsEmpty && <h3>No results found</h3>}
      </PopOverList>
    </Wrapper>
  );
};

export const Custom = () => {
  return (
    <ReactSearchHighlightProvider>
      <Template />
    </ReactSearchHighlightProvider>
  );
};

Or with the wrapper component

import {
  PopOverList,
  PopOverOption,
  PopOverOptionText,
  Props,
  SearchBar,
  Wrapper
} from 'react-search-highlight';
import 'react-search-highlight/dist/react-search-highlight.cjs.development.css';

import TEST_DATA from '../data.json';

export const Default = args => {
  return (
    <Wrapper>
      {({suggestions}) => {
        return (
          <>
            <SearchBar
              data={TEST_DATA} // need to provide data here
              keysToSearch={['heading', 'title']} // keys to search from data object
              placeholder="search docs"
            />
            <PopOverList>
              {suggestions?.map((item, index) => (
                <PopOverOption
                  optionIndex={index}
                  key={index}
                  onClick={() => alert(index)}
                >
                  ⚡️
                  <PopOverOptionText as="h3" value={item.heading} />
                  <PopOverOptionText as="h5" value={item.title} />
                </PopOverOption>
              ))}
            </PopOverList>
          </>
        );
      }}
    </Wrapper>
  );
};

If you want to use it with modal

import {Modal} from 'react-search-highlight';

export const WithModal = () => {
  return (
    <div>
      <h1>Modal is open</h1>
      <Modal>
        <Default />
      </Modal>
    </div>
  );
};

Data must be provided as array of object format in `<SearchBar/>` component `data` prop, additionally `keysToSearch` prop must be a array of keys to search form data object.

const data = [
  {
    title:....,
    name:.....,
    age:......,
  },
  ....
]
// It is not necessary to pass all the keys from the object, only keys that are passed
// will be searched
const keysToSearch = ['title','name']


<SearchBar
  data={data} 
  keysToSearch={keysToSearch}
 />

🔨 API

useReactSearchHighlight can be used with ReactSearchHighlightProvider and it can be used throughout the component to access the context values. Note that whenever you are using it you must wrap the entire component using ReactSearchHighlightProvider.

const {
  suggestions,
  isLoading,
  input,
  startLoading,
  endLoading,
  isResultsEmpty,
  resetState
} = useReactSearchHighlight();

You can also access these values using wrapper component

    <Wrapper>
      {({suggestions, isLoading, input, startLoading, endLoading, isResultsEmpty, resetState}) => {
        return (
          .....
        );
      }}
    </Wrapper>

`<SearchBar/>` Props:

  // Data to perform search operation
  data: any[];

  // Determines which keys to search from the data object
  keysToSearch?: string[];

  // Determines input box behaviour it accepts three values DEBOUNCE, THROTTLE or DEFAULT
  inputAlgorithm?: typeof DEBOUNCE | typeof THROTTLE | typeof DEFAULT;

  // Optional: Determines the input algorithm timeout for debounce and throttle
  inputAlgorithmTimeout?: number;

  // Determines matching algorithm to search over data, it accepts two values CHARACTER_MATCHING or STRING_MATCHING
  // CHARACTER_MATCHING matches each character from the data to highlight it
  // STRING_MATCHING matches each word from the data to highlight it
  matchingAlgorithm?: typeof CHARACTER_MATCHING | typeof STRING_MATCHING;

  // Optional: input value, it is recommended not to pass any in general case
  value?: string;

  // Optional: input value onChange event handler
  onChange?: (e:React.ChangeEvent<HTMLInputElement>) => void

  // Optional: Determines initial input value
  initialValue?: string

  // Optional: It can be used to change search bar icon
  PrefixIcon?: React.FC

`<PopOverOption/>` Props:

  // React element node
  children: ReactNode;
  
  // Determines the navigation index used for internal list navigation
  optionIndex: number;

`<PopOverOptionText/>` Props:

  // Determines text value to render with highlight
  value: string;

  // Determine type of html element ex: p, h1, h2
  as: string;

🐛 Bug Reporting

The Library is in developing stage

Feel free to Open an issue on GitHub to request any additional features you might need for your use case.
Connect with me on LinkedIn. I'd love ❤️️ to hear where you are using this library.