@ecancan/react-generic-search-bar

React Generic Search Bar

This module is generic search bar component. Main purpose of this module is filter with just typing custom properties your item data.

Demo

Installation

With Yarn

yarn add @ecancan/react-generic-search-bar

With Npm

npm install @ecancan/react-generic-search-bar

Usage

Basic

import { SearchBar } from '@ecancan/react-generic-search-bar';

<SearchBar<ItemsType>
  items={items}
  onResult={(_items) => console.log(_items)}
  placeholderText={'Search and filter. Eg. /gender:male /species:alien ...'}
  />

All props are optional. Actually no need any props for basic usage.

Advanced

import { SearchBar } from '@ecancan/react-generic-search-bar';

<SearchBar<ItemsType>
  items={items} 
  onResult={(_items) => console.log(_items)}
  onChange={(value) => console.log(value)}
  buttonLabel={'Search...'}
  styles={{containerStyle: styleValue, searchInputStyle: styleValue}}
  placeholderText={'Search and filter. Eg. /gender:male /species:alien ...'}
  />

All Props

Prop Name	Necessity	Value Example	Value Type
items	optional	Advanced	array
buttonLabel	optional	Advanced	string
placeholderText	optional	Advanced	string
styles	optional	Advanced	SearchBarStyleProps
onChange	optional	Advanced	((value: string) => void)
onResult	optional	Advanced	function

Next Features

• [ ] Query string builder
• [ ] Openable type map modal with shortcut
• [ ] Type suggestion on searching (maybe autocomplete 😝)

How do you contribute

Git Clone

git clone https://github.com/Ecancan/ReactGenericSearchBar.git

Install packages & Run

With Yarn

yarn install
yarn run storybook

With Npm

npm install
npm run storybook

Build

yarn run build

or

npm run build

Note

If you see any bug or issue please open a issue or send a contribution. Thank you for your time on this module. :)