Customizable Searchbox with autocomplete and highlighted results for React applications.
npm install react-searchbox-like-youtube
Fully customizable and responsive, ready-to-use SearchBox component like Youtube.
Demo
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
}
``