Fully customizable and responsive, ready-to-use SearchBox component like Youtube.

Demo

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