React_Visual_Search
React Basic Visual Search Library.
Quick Overview
react_visual_search
allows to search data by attribute name. Multiple filters can be applied to take broad range of data.
Features:
Getting started
npm install react_visual_search
Or
git clone https://github.com/NikunjPansuriya/React_Visual_Search.gitcd visual_search/
npm install
npm start
Then open http://localhost:8080/ to see demo examples.
Quick Usage :
import 'react_visual_search/libs/css/visual_search.css';
import VisualSearch from 'react_visual_search';..
...
onFilter(filters){
console.log(filters);}render(){ return ( <VisualSearch
className= "react_visual_search"
category= {[
{label: "Name",name:"name",type: "text"},
{label: "First Name",name:"firstName",type: "text"},
{label: "Gender", name:"gender",type:"list",options:[{label:"Male",value:"M"},{label:"Female",value:"F"}]},
{label: "Date of Birth", name:"birthDate",type: "date", options:{format:"DD-MMM-YYYY",mode:"days"}}
]}
onFilter= {this.onFilter}
/>
);}
....
...
Props
Parameter | Type | Default Value | Description |
---|
className | string | undefined | className for the search element. |
removeOnBackspace | boolean | false | on pressing backspace button remove the last item. |
filterOptions | boolean | false | enable search for options dropdown. |
removeOnSelect | boolean | false | Removed selected option from options dropdown. |
defaultValue | array | undefined | set initial value in visual search. e.g. [{'name':'name','value': 'test'},{'name':'gender','value': 'M'}] |
Supported Types :
text
list
date
format: It accepts any Moment.js
date format.
mode: The default view to display when the picker is shown ('days','month','year').
License
MIT.