# @ruichen0101/react-filter-bar

> [live demo](https://ruichen0101.github.io/react-filter-bar/)

Latest version **0.1.1** (published 2022-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ruichen0101/react-filter-bar
pnpm add @ruichen0101/react-filter-bar
yarn add @ruichen0101/react-filter-bar
bun add @ruichen0101/react-filter-bar
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-12-28 |
| First published | 2022-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 43.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | RuiChen |
| Maintainers | ruichen0101 |
| Keywords | react, components, ui, filter, search |

## Links

- npm: https://www.npmjs.com/package/@ruichen0101/react-filter-bar
- Repository: https://github.com/RuiChen0101/react-filter-bar
- Homepage: https://github.com/RuiChen0101/react-filter-bar#readme
- Issues: https://github.com/RuiChen0101/react-filter-bar/issues
- npm.io page: https://npm.io/package/@ruichen0101/react-filter-bar

## Dependencies (10)

- [sass](https://npm.io/package/sass.md) ^1.56.1
- [react](https://npm.io/package/react.md) ^18.2.0
- [tslib](https://npm.io/package/tslib.md) ^2.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [typescript](https://npm.io/package/typescript.md) ^4.9.3
- [object-hash](https://npm.io/package/object-hash.md) ^3.0.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.0.25
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.2.0
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^6.2.1
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^6.2.1

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.1.1 (latest) — 2022-12-28
- 0.1.0 — 2022-12-28

## README

# React Filter Bar

[live demo](https://ruichen0101.github.io/react-filter-bar/)

## Install

```
npm i @ruichen0101/react-filter-bar
```

## Stylesheets

Make sure you import the global style in index.js/tsx.

```javascript
import '@ruichen0101/react-filter-bar/dist/css/ReactFilterBar.min.css';
```

## Usage

```javascript
import ReactFilterBar, { FilterItem, FilterType } from "@ruichen0101/react-filter-bar";

<ReactFilterBar
    filterSetting={[{
        key: "user.id",
        text: "Id",
        type: FilterType.inputEq,
    }, {
        key: "user.name",
        text: "name",
    }, {
        key: "user.email",
        text: "email",
    }, {
        key: "user.status",
        text: "status",
        type: FilterType.dropdown,
        options: [
            { text: 'normal', value: 1 },
            { text: 'blocked', value: -1 },
            { text: 'deleted', value: -99 }
        ]
    }]}
    onFilterUpdate={(result) => {
        console.log(result);
    }}
/>
```

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