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

import SearchBox from 'react-responsive-searchbox/lib/SearchBox';

Usage Example

import React, { Component } from 'react';
import SearchBox from 'react-responsive-searchbox/lib/SearchBox';
 
class App extends Component {
 
  state = {searchBoxVal:""}
 
  handleSearchBoxValChange = (e)=>{
    this.setState({
      searchBoxVal:e.target.value
    })
  }
 
  handleSearchBoxSubmit = (e)=>{
    e.preventDefault();
    console.log(this.state.searchBoxVal);
  }
 
  render() {
    return (
      <div>
        <SearchBox placeholder="Enter search term" value={this.state.searchBoxVal} onchange={this.handleSearchBoxValChange}
        searchBoxStyles={{color:"dodgerBlue", height:"24px", border:"1px solid blue"}}
        searchButtonStyles={{background:"dodgerBlue", border:"1px solid blue"}}
        searchIconStyles={{color:"#fff", height:"24px", lineHeight:"24px"}}
        OnSubmit={this.handleSearchBoxSubmit}
        />
      </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.