react-responsive-searchbox

A search box component library built using React Js

Usage no npm install needed!

<script type="module">
  import reactResponsiveSearchbox from 'https://cdn.skypack.dev/react-responsive-searchbox';
</script>

README

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.