react-searchable-filter
IntroductionGetting StartedPropsUsageDemo

Props

Name of the PropType of the propDefaultUsage
optionsArrayRenders options in the Filter component
placeholderStringSets the placeholder for the Filter component
hoverColorString#0d66d6Changes the highlighted colour of the selected option
classNameStringClass-name for filter field container.
inputClassNameStringClass-name for the input element.
dropdownListClassNameStringClass-name for the dropdown list.
onSubmitFunctionThis is callback function which provides the filtered values when the filter component is submitted.
optionsListMaxHeightnumber200Sets the maximum height of the options list container.
styleCSS PropertiesThis prop is used to style the Filter component.
customFilterIconReactNodeThis prop enables you to set custom filter-icon in the left side of the filter component.
customClearIconReactNodeThis prop enables you to set custom clear-icon.
editableBooleantrueYou can make the filter field as non-editable by setting this prop to false.
onClearFunctionThis is callback function which is called when the filters are cleared.

Usage

Example-1

  • Example for the props - options , placeholder.

  • options is the required prop to be passed to the Filter component.

import React, { useState } from 'react'
import Filter from 'react-searchable-filter'
import 'react-searchable-filter/dist/index.css'


const App = () => {
  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']
    }
  ]


  return (
    <div>
      <Filter options={options} placeholder='Filter Users' />
    </div>
  )
}

Example-2

  • Example for props - className, style, inputClassName, dropdownListClassName and hoverColor.
.filter-component {
  width:'300px'
  height:'80px'
}
import React, { useState } from 'react'
import Filter from 'react-searchable-filter'
import 'react-searchable-filter/dist/index.css'


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


const App = () => {
  return (
    <div>
      <Filter
        options={options}
        className='filter-component'
        inputClassName='filter-field-input'
        dropdownListClassName='dropdown-list'
        style={{ margin: '10px' }}
        hoverColor='teal'
      />
    </div>
  )
}

Example-3

  • Example for the prop - onSubmit and onClear
import React, { useState } from 'react'
import Filter, { onSubmitFiltersType } from 'react-searchable-filter'
import 'react-searchable-filter/dist/index.css'


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


const App = () => {
  const [selectedFilters, setSelectedFilters] = useState([])
  const submitHandler = (filters: onSubmitFiltersType) => {
    setSelectedFilters(filters)
  }


  const clearFilters = () => {
    setSelectedFilters([])
  }


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

Example-4

  • Example for the props - customFilterIcon, customClearIcon
import React, { useState } from 'react'
import Filter from 'react-searchable-filter'
import 'react-searchable-filter/dist/index.css'
import { FaFilter } from 'react-icons/fa'
import { AiFillCloseCircle } from 'react-icons/ai'


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


const App = () => {
  return (
    <div>
      <Filter
        options={options}
        customFilterIcon={<FaFilter />}
        customClearIcon={<AiFillCloseCircle />}
      />
    </div>
  )
}

Example-5

  • Example for the prop - editable and optionsListMaxHeight
import React, { useState } 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} editable={false} optionsMaxHeight={300} />
    </div>
  )
}