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




Demo

Installation

``bash
npm install react-searchbox-like-youtube
`
or
`bash
yarn add react-searchbox-like-youtube
`

Import

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

You can also import types if you needed.
`javascript
import SearchBox, { ISearchResult } from 'react-searchbox-like-youtube'
`

Usage

$3

`javascript
onChange={handleOnChange}
onClick={handleOnClick}
onSearch={handleOnSearch}
results={results}
/>
`

$3

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

$3

`jsx
//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.

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

Stylings

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

Licence

MIT Alptuğ İdin