Installation

npm install react-searchbox-like-google

or

yarn add react-searchbox-like-google

Import

import SearchBox from 'react-searchbox-like-google'

You can also import types if you needed.

import SearchBox { IOnClickData, ISearchResults } from 'react-searchbox-like-google'

Usage

With required props.

         <SearchBox
            onChange={handleOnChange}
            onClick={handleOnclick}
            results={results}
          />

With all props.

          <SearchBox
            onChange={handleOnChange}
            onClick={handleOnclick}
            results={asyncResults}
            darkMode={darkMode}
            placeHolder='Search Movies e.g. The Matrix'
            showDetail
            showImage
            limit={10}
            thresHold={1}
            sx={{
              mainBackground: '#ffffff',
              darkThemeColor: '#202124',
              borderRadius: 24,
              transitionDuraiton: 150
            }}
            buttons={[
              { label: 'Search', handler: btn1handler },
              { label: 'Do something', handler: btn2handler }
            ]}
          />

Handlers

  //All parameters are optional.
  const handleOnclick = (onClickData: IOnClickData): void => {
    console.log(onClickData);
  };

  const handleOnChange = (onChangeData: string): void => {
    setQuery(onChangeData);
  };

Props

| Prop | Type | Description | | :-------- | :------- | :------------------------- | |onChange |(onChangeData: string) => void | A function that triggers when you typing. Callback function parameter provides input value.| |onClick|(onClickData: IOnClickData) => void| A function that triggers when you select any of results. Callback function parameter provides selected result's data. | |results | ISearchResults[] | Array of objects. More details.| |limit|number| Limit of search results displayed at once. Default is 10 (7 on mobile)| |thresHold|number| onChange function works when length of value greater than threshold. Default value is 1 | |placeHolder|string| Placeholder | |showImage|boolean| If true, images are displayed on search results. Default value is false| |showDetail|boolean|If true, details are displayed on search results. Default value is false| |darkMode|boolean| Dark mode state.| |sx|object| Contains style properties. More details. | |buttons|array| Contains buttons. More details. |

Results

Every single object in result array should have the following structure. id and title are required.

interface ISearchResults {
  id: number | string
  title: string
  image?: string
  detail?: string
  href?: string
}

Stylings

sx?: {
    mainBackground?: string             // default  #ffffff
    textColor?: string                  // default  #1f2937
    highlightColor?: string             // default  #1f2937
    darkThemeColor?: string             // default  #202124   
    borderRadius?: BorderRadiusRange    // number between 0-24. default 24
    transitionDuraiton?: number         // default 150 (ms)
  }

Buttons

Default value is undefined. When the value is undefined, no buttons are displayed at the bottom of the search results. You can create one or two.

 buttons?: [
    btn1?: { label: string, handler: (onChangeData: IOnClickData) => void },
    btn2?: { label: string, handler: (onChangeData: IOnClickData) => void },
  ]

Button Handlers

  //All parameters are optional.
  const btn1handler = (onClickData: IOnClickData): void => {
    console.log('Button 1 clicked!');
    console.log(onClickData);
  };

  const btn2handler = (): void => {
    console.log('Button 2 clicked!');
  };

Licence

MIT Alptuğ İdin