React_visual_search NPM

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:

Search Support text,list and date mode.

Examples

Visual Search Example

Getting started

npm install react_visual_search
Or
git clone https://github.com/NikunjPansuriya/React_Visual_Search.git
cd visual_search/

npm install
npm start

Then open http://localhost:8080/ to see demo examples.

Quick Usage :

Add style in Your Application.

import 'react_visual_search/libs/css/visual_search.css';

Add Visual_Search in Your Application.

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').