React Bootstrap Search Box

Add easier search box to your site with close icon on search and support callback method for mouse events.

import { SearchInputBox } from "react-bs-search";

Search Input box

Search input box supports callback method for mouse event.

• Default it has the close icon if search value is not null.

Example

import React, {useState} from 'react';
import { SearchInputBox } from "react-bs-search";

function App() {
    const [setSearchMember , setSearchMember] =useState=(""); // For local reference
    // Initializing search input box 
    const [searchProps, setSearchProps] = useState({
        "placeholder": "Search team members...",
        "onClear": () => setSearchMember(""),
        "onChange": (searchValue) => setSearchMember(searchValue);
        "OnEnter": (searchValue) => setSearchMember(searchValue);
        "clearInputValue": false
    });

  return (
    <div className="App">
            <div className="search-wrap">
                <SearchInputBox {...searchProps} />
            </div>
    </div>
  );
}
export default App;

Modal Properties

| Name |Type |Default | Description | | ------------ | ------------ | ------------ | ------------ | | placeholder | String | | Displays placeholder inside search box | | clearInputValue | Boolean | false | Clear the search value when true | | onClear | Function | | Fired when close icon click | | onChange | Function | | Fired when input value changes | | onEnter | Function | | Fired on mouse enter |