React Responsive Search Box
A search box component library built using React Js
Important note-
Please include a font-awesome CDN in your app for the search icon to display.
How to install
npm install --save react-responsive-searchbox
How to import into your component
;
Usage Example
;; state = searchBoxVal:"" { this } { e; console; } { return <div> <SearchBox placeholder="Enter search term" value=thisstatesearchBoxVal onchange=thishandleSearchBoxValChange searchBoxStyles=color:"dodgerBlue" height:"24px" border:"1px solid blue" searchButtonStyles=background:"dodgerBlue" border:"1px solid blue" searchIconStyles=color:"#fff" height:"24px" lineHeight:"24px" OnSubmit=thishandleSearchBoxSubmit /> </div> ; }
API info (props passed)
Prop | Value | Description |
---|---|---|
placeholder | " " | The placeholder for the search box |
value | state = {searchBoxVal:""} | A state variable holding the intial value for the search box |
searchBoxStyles | { } | A plain Javascript object holding style values for the searchBox. Ex- {border:"none"} |
searchButtonStyles | { } | A plain Javascript object holding style values for the searchButton. Ex- {color:"red"} |
searchIconStyles | { } | A plain Javascript object holding style values for the search icon embedded inside the search button. Ex- {color:"red"} |
searchFormStyles | { } | A plain Javascript object holding style values for the search form, which is the parent for the search box and the search button. |
Ex- {justifyContent:"center"} | ||
onchange | A function (definition in the example above) | A Javascript function that is invoked on the onChange event of the search box. |
OnSubmit | A function (definition in the example above) | A Javascript function that is invoked on search submission. |