0.0.7 • Published 5 years ago
react-bs-search v0.0.7
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 |