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 => == val.toLowerCase())
  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.
These classes will be used to style in the search input box.

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