Filterme

Deadly simple filter management library

Installation

Filterme is available as a npm package.

// with yarn
yarn add filterme

// with npm
npm i filterme --save

// with npm (from github)
npm i git+ssh://github.com:yinjs/filterme.git

Usage

Here is a quick example to get you started

Code snippet

import React from 'react'
import Filterme, { Manager, FilterBar } from 'filterme'

function App() {
  return (
    <Manager>
      <FilterBar
        namespace="user_list_page"
        options={[
          { name: 'page_size', options: [10, 20, 30] },
          { name: { label: 'Gender', value: 'gender' }, options: [{ label: 'Male', value: 'male' }, { label: 'Female', value: 'female' }] },
        ]}
      />
      <Filterme namespace="user_list_page">
        {({ values, put }) => {
          return <pre>{JSON.stringify(values, null, 2)}</pre>
        }}
      </Filterme>
    </Manager>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))

FilterBar Props

• namespace: namespace of filter data.
• options: Select options in FilterBar.
  • name: Filter name. Accept string or object like { label: 'Filter display name', value: 'Filter name' }
  • options: Array of filter value options. Accept array of string or object like { label: 'Filter display value', value: 'Filter value' }