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