# filterme

> Deadly simple filter management library

Latest version **0.0.2** (published 2019-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install filterme
pnpm add filterme
yarn add filterme
bun add filterme
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-07-29 |
| First published | 2019-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 106.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yinjiangsheng@gmail.com |
| Maintainers | yinjs |

## Links

- npm: https://www.npmjs.com/package/filterme
- Repository: https://github.com/yinjs/filterme
- Homepage: https://github.com/yinjs/filterme#readme
- Issues: https://github.com/yinjs/filterme/issues
- npm.io page: https://npm.io/package/filterme

## Dependencies (4)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-tether](https://npm.io/package/react-tether.md) ^2.0.3
- [tiny-warning](https://npm.io/package/tiny-warning.md) ^1.0.3
- [styled-components](https://npm.io/package/styled-components.md) ^4.3.2

## Recent versions

- 0.0.2 (latest) — 2019-07-29
- 0.0.1 — 2019-07-29

## README

# Filterme

Deadly simple filter management library

[![npm version](https://img.shields.io/npm/v/filterme.svg?style=flat-square)](https://www.npmjs.com/package/filterme)
[![npm downloads](https://img.shields.io/npm/dm/filterme.svg?style=flat-square)](https://www.npmjs.com/package/filterme)
![code style](https://img.shields.io/badge/code_style-eslint-463fd4.svg?style=flat-square)
![code formatter](https://img.shields.io/badge/code_formatter-prettier-ff69b4.svg?style=flat-square)

## Installation

Filterme is available as a [npm package](https://www.npmjs.com/package/filterme).

```sh
// 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

```jsx
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' }

---
_Source: https://npm.io/package/filterme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._