Search
This component acts like a typical search bar where you enter a query or keyword and then get the filtered results to be displayed as list.
A very simple example of Search component is as provided below
import {Search} from '@adiranids/react-tailwind'
import {useState} from 'react'
const data = [ {name: aditya}, {name: John}, {name: Doe} ] function App(){
const [result, setResult] = useState([]) const query = (val) =>
{ // you can either use useState to set the value of val to some state or make an api call here
let res = data.filter(item => item.name.toLowerCase() == val.toLowerCase())
setResult(res)
}
return(<Search
change={query}
searchResult={result}
resultCallBack={showAlert}
placeholder="Enter a name to search"
resultListClasses="hover:bg-purple-500 hover:text-gray-50"
class="w-3/4 mx-auto"
resultKey="name" /> )
}
import {useState} from 'react'
const data = [ {name: aditya}, {name: John}, {name: Doe} ] function App(){
const [result, setResult] = useState([]) const query = (val) =>
{ // you can either use useState to set the value of val to some state or make an api call here
let res = data.filter(item => item.name.toLowerCase() == val.toLowerCase())
setResult(res)
}
return(<Search
change={query}
searchResult={result}
resultCallBack={showAlert}
placeholder="Enter a name to search"
resultListClasses="hover:bg-purple-500 hover:text-gray-50"
class="w-3/4 mx-auto"
resultKey="name" /> )
}
The above code will produce the following result
If you want to include your own search icon then just set defaulIcon prop to false and include your icon component with some tailwind or css classes.
Here is the list of all the props that can be used with this component
| Prop | Default Value | Description |
|---|---|---|
| inputClasses (type = string) | "" |
Takes in space separated string of tailwind or css classes. |
| searchResult (type = array) | {} |
This will consist of the data recieved from your api or after
applying the search filter. If the data is array of object then you can specify the resultKey prop to tell what key to target in the data set. Each item will be rendered as li tag. |
| resultKey (type = string) | "" |
This prop refers to the key to target in your searchResult. For example if you receive a dataset like below after you enter your query/keyword in search input [ { name: "aditya", id: 100 }, { name: "aditya", id: 200, } ] Now if you want to display name in the search result then your resultKey will be "name" |
| resultContainerClasses (type = string) | "" |
Like inputClasses props, this props takes space seperate string
of tailwind or css classes and applies them on result container or the dropdown. |
| resultListClasses (type = string) | "" |
Like inputClasses props, this props takes space seperate string
of tailwind or css classes and applies them on result list item. |
| resultCallBack (type = function) | required |
Sometimes you may want a callback to run on the search result click.
As each result is a list item this prop will take in a function that will run on the search result item click. |
| bordered (type = boolean) | true | if set to true it will put a border bottom on each search result item |
| placeholder (type = string) | "" | placeholder for the input search box |
| defaultIcon (type = boolean) | true | The search icon comes with default search icon which can be avoided by setting this prop to false. |
| icon (type = ReactNode) | ReactFragment | Search icon component |
| value (type = string) | "" | In case of useState or data binding, just use the value of useState variable |
| change (type = function) | required | Function to catch and process search query input value. |
Copyright © 2021 Adirani Digital Solutions Ltd