react-searchable-filter
IntroductionGetting StartedInstallationBasic UsagePropsDemo

Getting Started

Installation

Start by installing react-searchable-filter as a dependency with npm :

npm i react-searchable-filter

or if you are using yarn :

yarn add react-searchable-filter

Basic Usage

1. Define the options

The options for the filter component are passed as array of objects. Each option will have the following properties : filterBy, values and description. filterBy property defines how the data should be filtered, values property describes the possible values that the filter provides and description property defines the description of each filter.

const options = [
  {
    filterBy: 'status',
    values: ['finished', 'not-finished', 'pending'],
    description: 'filter by status'
  },
  {
    filterBy: 'age',
    values: ['30', '25', '18', '22'],
    description: 'filter by age'
  },
  {
    filterBy: 'username',
    description: 'filter by username',
    values: [
      'John',
      'Albert',
      'Robert',
      'Doss',
      'Marry',
      'Racheal',
      'Joe',
      'Monika',
      'Chandler'
    ]
  }
]

2. Usage

You can use the filter component anywhere and pass the options prop.

import React from 'react'
import Filter from 'react-searchable-filter'
import 'react-searchable-filter/dist/index.css'


import options from '../path/where/options/present'


const App = () => {
  return (
    <div>
      <Filter options={options} />
    </div>
  )
}

3. Get Selected Filters

After selecting the respective filters, You can make use of onSubmit prop to get the selected filter properties.

import React from 'react'
import Filter from 'react-searchable-filter'
import 'react-searchable-filter/dist/index.css'


import options from '../path/where/options/present'


const App = () => {
  const submitHandler = (filters) => {
    console.log(filters)
  }


  return (
    <div>
      <Filter options={options} onSubmit={submitHandler} />
    </div>
  )
}

4. Styling the Filter component

  • You can style the Filter component with the help of className or using inline styles just like other html components.

  • hoverColor prop is used to change the highlighted colour of the selected option.

import React from 'react'
import Filter from 'react-searchable-filter'
import 'react-searchable-filter/dist/index.css'


import options from '../path/where/options/present'
import './index.css'


const App = () => {
  return (
    <div>
      <Filter
        options={options}
        className='filter'
        style={{ margin: '20px' }}
        hoverColor='teal'
      />
    </div>
  )
}

Playground

Feel free to check out the functionalities of the filter component in the below playground.