Installation

npm install react-searchbox-like-youtube

or

yarn add react-searchbox-like-youtube

Import

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

You can also import types if you needed.

import SearchBox, { ISearchResult } from 'react-searchbox-like-youtube'

Usage

With required props.

        <SearchBox
            onChange={handleOnChange}
            onClick={handleOnClick}
            onSearch={handleOnSearch}
            results={results}
        />

With all props.

        <SearchBox
            onChange={handleOnChange}
            onClick={handleOnClick}
            onSearch={handleOnSearch}
            nightMode={nightMode}
            results={results}
            placeholder='Search tutorials e.g. Javascript'
            sx={{
              lightBg: '#FFFFFF',
              darkBg: '#0F0F0F'
            }}
        />

Handlers

  //All parameters are optional.

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

const handleOnClick = (onClickData: ISearchResult): void => {
    //...
};

const handleOnSearch = (onSearchData: any): void => {
    //...
};

Props

| Prop | Type | Description | | :-------- | :------- | :------------------------- | |onChange |(onChangeData: string) => void | A function that triggers when you typing. Callback function parameter provides the input value.| |onClick|(onClickData: IOnClickData) => void| A function that triggers when you select any of results. Callback function parameter provides selected result's data. | |onSearch|(onSearchData: any) => void| A function that triggers when you click search button or press 'enter'. Callback function parameter provides selected results data. | |results | ISearchResult[] | Array of objects. More details.| |placeHolder|string| Placeholder | |sx|object| Contains style properties. More details. |

Results

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

interface ISearchResult {
  id: number
  title: string
  href?: string
}

Stylings

sx?: {
    lightBg?: string,   // default  #FFFFFF
    darkBg?: string     // default  #0F0F0F
  }

Licence

MIT Alptuğ İdin