Fully customizable and responsive, ready-to-use SearchBox component like Youtube.
Demo
npm install react-searchbox-like-youtube
or
yarn add react-searchbox-like-youtube
import SearchBox from 'react-searchbox-like-youtube'
You can also import types if you needed.
import SearchBox, { ISearchResult } from 'react-searchbox-like-youtube'
<SearchBox
onChange={handleOnChange}
onClick={handleOnClick}
onSearch={handleOnSearch}
results={results}
/>
<SearchBox
onChange={handleOnChange}
onClick={handleOnClick}
onSearch={handleOnSearch}
nightMode={nightMode}
results={results}
placeholder='Search tutorials e.g. Javascript'
sx={{
lightBg: '#FFFFFF',
darkBg: '#0F0F0F'
}}
/>
//All parameters are optional.
const handleOnChange = (onChangeData: string): void => {
//...
};
const handleOnClick = (onClickData: ISearchResult): void => {
//...
};
const handleOnSearch = (onSearchData: any): void => {
//...
};
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. |
Every single object in result array should have the following structure. id and title are required.
interface ISearchResult {
id: number
title: string
href?: string
}
sx?: {
lightBg?: string, // default #FFFFFF
darkBg?: string // default #0F0F0F
}
MIT Alptuğ İdin