react-searchbox-like-youtube v1.0.2

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

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