❤
npm
Sign UpSign In

react_visual_search

1.0.14-beta • Public • Published

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

License

MIT.

Readme

Keywords

Package Sidebar

Install

npm i react_visual_search

Repository

github.com/NikunjPansuriya/React_Visual_Search

Homepage

github.com/NikunjPansuriya/React_Visual_Search#readme

Weekly Downloads

3

Version

1.0.14-beta

License

MIT

Unpacked Size

885 kB

Total Files

27

Last publish

Collaborators

  • nikunj44
Try on RunKit
Report malware