# @vtaits/react-filterlist

> React wrapper above @vtaits/filterlist

Latest version **4.0.0** (published 2025-11-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vtaits/react-filterlist
pnpm add @vtaits/react-filterlist
yarn add @vtaits/react-filterlist
bun add @vtaits/react-filterlist
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2025-11-06 |
| First published | 2018-11-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Vadim Taits |
| Maintainers | vtaits |
| Keywords | filterlist, filter, sort, pagination, react |

## Links

- npm: https://www.npmjs.com/package/@vtaits/react-filterlist
- Repository: https://github.com/vtaits/filterlist
- Homepage: https://github.com/vtaits/filterlist#readme
- Issues: https://github.com/vtaits/filterlist/issues
- npm.io page: https://npm.io/package/@vtaits/react-filterlist

## Dependencies (1)

- [@vtaits/use-latest](https://npm.io/package/@vtaits/use-latest.md) ^1.3.0

## Recent versions

- 4.0.0 (latest) — 2025-11-06
- 2.1.1-signals.0 (signals) — 2024-12-10
- 0.4.0-alpha.1 (alpha) — 2022-10-28
- 3.0.0 — 2025-06-11
- 2.1.1 — 2024-12-10
- 2.1.0-signals.0 — 2024-11-02
- 2.1.0 — 2024-10-21
- 2.0.1 — 2024-08-01
- 2.0.0 — 2024-07-15
- 1.2.0 — 2024-05-08
- 1.1.0 — 2024-05-08
- 1.0.0 — 2024-01-28
- 0.3.2 — 2023-05-02
- 0.3.1 — 2021-10-01
- 0.3.0 — 2020-12-01
- … 11 more at https://npm.io/package/@vtaits/react-filterlist/versions

## README

[![NPM](https://img.shields.io/npm/v/@vtaits/react-filterlist.svg)](https://www.npmjs.com/package/@vtaits/react-filterlist)
![dependencies status](https://img.shields.io/librariesio/release/npm/@vtaits/react-filterlist)

# @vtaits/react-filterlist

React wrapper above [@vtaits/filterlist](https://www.npmjs.com/package/@vtaits/filterlist).

## Sandbox examples

- Table with filters: [demo](https://kto5e.csb.app/), [source](https://codesandbox.io/s/example-kto5e)

## Installation

```
npm install @vtaits/filterlist @vtaits/react-filterlist --save
```

or

```
yarn add @vtaits/filterlist @vtaits/react-filterlist
```

or

```
bun add @vtaits/filterlist @vtaits/react-filterlist
```

## Simple examples

```typescript
import { useFilterlist } from '@vtaits/react-filterlist';

function List() {
  const [listState, filterlist] = useFilterlist({
    loadItems: async () => {
      const response = await fetch('/cars');
      const cars = await response.json();

      return {
        items: cars,
				total: cars.length,
      };
    },
  });

  const {
    items,
    loading,
    total,
  } = listState;

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>brand</th>
            <th>owner</th>
            <th>color</th>
          </tr>
        </thead>

        <tbody>
          {
            items.map(({
              id,
              brand,
              owner,
              color,
            }) => (
              <tr key={ id }>
                <td>{ id }</td>
                <td>{ brand }</td>
                <td>{ owner }</td>
                <td>{ color }</td>
              </tr>
            ))
          }
        </tbody>
      </table>

      {
        typeof total === 'number' && (
          <h4>
            Total: {total}
          </h4>
        )
      }

      {
        loading && (
          <h3>Loading...</h3>
        )
      }
    </div>
  );
};
```

## Api

### useFilterlist

```typescript
import { useFilterlist } from '@vtaits/react-filterlist';

// ...

const [requestParams, listState, filterlist] = useFilterlist({
  ...options,
  onChangeLoadParams,
  canInit,
});
```

`listState` and `filterlist` are `null` during async init or when `canInit` is `true`

#### Params

- **options** - options of [@vtaits/filterlist](https://www.npmjs.com/package/@vtaits/filterlist)

- **onChangeLoadParams** - function, callback of `changeLoadParams` event of [@vtaits/filterlist](https://www.npmjs.com/package/@vtaits/filterlist)

- **canInit** - boolean, filterlist will not be initialized until `canInit` is `true`

### useFilter

The hook that binds filterlist methods to the filter and receives its value by name

```typescript
import { useFilterlist, useFilter } from '@vtaits/react-filterlist';

// ...

const [requestParams, listState, filterlist] = useFilterlist(options);

const {
  setFilterValue,
  setAndApplyFilter,
  applyFilter,
  resetFilter,
  value,
  appliedValue,
} = useFilter(listState, filterlist, 'filter_name');

setFilterValue('next_value');
setAndApplyFilter('next_value');
applyFilter();
resetFilter();
```

### useBoundFilter

`useFilter` that automatically bound to the filterlist

```typescript
import { useFilterlist } from '@vtaits/react-filterlist';

// ...

const [listState, filterlist, {
  useBoundFilter,
}] = useFilterlist(options);

const {
  setFilterValue,
  setAndApplyFilter,
  applyFilter,
  resetFilter,
  value,
  appliedValue,
} = useBoundFilter('filter_name');

setFilterValue('next_value');
setAndApplyFilter('next_value');
applyFilter();
resetFilter();
```

### Navigator url sync

You can use one of the next integrations:

[react-router v6](https://github.com/vtaits/filterlist/tree/master/packages/react-filterlist-router-6)

[react-router v5](https://github.com/vtaits/filterlist/tree/master/packages/react-filterlist-router-6)

Or use `createDataStore` parameter as described in the [core](https://www.npmjs.com/package/@vtaits/filterlist) package

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