# use-sortable

> Modular utility hooks that we often use grouped in one package. Written in TypeScript, documented, tested and maintained.Disclaimer: at least React 16 is needed (the one with hooks ;) )

Latest version **1.1.0** (published 2025-08-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-sortable
pnpm add use-sortable
yarn add use-sortable
bun add use-sortable
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2025-08-14 |
| First published | 2021-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 64.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Saber Pourrahimi |
| Maintainers | spr021 |
| Keywords | react, react hooks, typescript, npm |

## Links

- npm: https://www.npmjs.com/package/use-sortable
- Repository: https://github.com/spr021/useSortable
- Issues: https://github.com/spr021/useSortable/issues
- npm.io page: https://npm.io/package/use-sortable

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2025-08-14
- 1.0.6 — 2021-10-08
- 1.0.5 — 2021-09-01
- 1.0.4 — 2021-09-01
- 1.0.3 — 2021-09-01
- 1.0.2 — 2021-09-01
- 1.0.0 — 2021-09-01
- 1.0.1 — 2021-09-01

## README

# use-sortable

sort & search & book-mark functionality with React [Hooks](https://reactjs.org/docs/hooks-intro.html).

<p>
  <a target="_blank" href="https://www.npmjs.com/package/use-sortable" title="NPM version"><img alt="npm" src="https://img.shields.io/npm/v/use-sortable"></a>
  <a target="_blank" href="http://makeapullrequest.com" title="PRs Welcome"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
</p>

## Installation

npm
```sh
npm i use-sortable
```

yarn
```sh
yarn add use-sortable
```

## Usage

[![Edit use-sortable](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usesortable-7irvg)

```js
import useSortable from "use-sortable";
import Data from "data.json"

function Table() {
  const { items, requestSort, requestSearch, requestBookMark } = useSortable(Data)

  return (
    <>
      <div>
        <div>
          <label>name</label>
          <input 
            onChange={(e) => requestSearch(e.target.name, e.target.value)} 
            name="name"
          />
        </div>
        <div>
          <label>date</label>
          <input 
            onChange={(e) => requestSearch(e.target.name, e.target.value)}
            name="date" 
          />
        </div>
        <div>
          <label>ad name</label>
          <input 
            onChange={(e) => requestSearch(e.target.name, e.target.value)}
            name="title"
          />
        </div>
        <div>
          <label>field</label>
          <select 
            onChange={(e) => requestSearch(e.target.name, e.target.value)}
            name="field"
          >
            <option value="title">title</option>
            <option value="price">price</option>
          </select>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <td onClick={() => requestSort('name')}>
              name
            </td>
            <td onClick={() => requestSort('date')}>
              date
            </td>
            <td onClick={() => requestSort('title')}>
              ad name
            </td>
            <td onClick={() => requestSort('field')}>
              field
            </td>
          </tr>
        </thead>
        <tbody>
          {items.map((item) => 
            <tr onClick={() => requestBookMark(item.id)} key={item.id}>
              <td>{item.name}</td>
              <td>{item.date}</td>
              <td>{item.title}</td>
              <td>{item.field}</td>
            </tr>
          )}
        </tbody>
      </table>
    </>
  )
}

export default Table
```

## API

### useSortable

```js
  const [state, actions] = useSortable(initialData)
```

#### state

##### Type: `Array`

| Key     |  Type   | Description        |
| ------- | :-----: | ------------------ |
| items    | `Array` | the result Array.    |

#### actions

##### Type: `function`

| Key     |    Type    | Description                                                                                |
| ------- | :--------: | ------------------------------------------------------------------------------------------ |
| requestSort     | `function` | Assign a new value to `items` sorted by `key` and `direction`. Supports an optional comparator. |
| requestSearch   | `function` | Assign a new value to `items` searched by `search` and `value`.                    |
| requestBookMark    | `function` | BookMark item and set it to of `items` array |

### Config

The second argument of `useSortable` accepts an optional configuration object:

| Key | Type | Description |
| --- | :--: | ----------- |
| disableUrlParams | `boolean` | Disable URL parameter synchronization. |
| disableLocalStorage | `boolean` | Disable bookmark persistence in `localStorage`. |
| onBookmarksChange | `function` | Callback fired whenever the bookmark list changes. |

## Related repo

- [spr021/useSortable](https://github.com/spr021/useSortable)

## License

MIT © [spr021](https://github.com/spr021)

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