# reakit

> Toolkit for building accessible rich web apps with React

Latest version **1.3.11** (published 2021-11-18) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.3.11 |
| Published | 2021-11-18 |
| First published | 2017-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8626 |
| Author | Diego Haz |
| Maintainers | diegohaz |
| Keywords | reakit, a11y, react, ui, toolkit, components |

## Links

- npm: https://www.npmjs.com/package/reakit
- Repository: https://github.com/reakit/reakit
- Homepage: https://github.com/reakit/reakit#readme
- Issues: https://github.com/reakit/reakit/issues
- Funding: https://opencollective.com/ariakit
- npm.io page: https://npm.io/package/reakit

## Dependencies (5)

- [reakit-utils](https://npm.io/package/reakit-utils.md) ^0.15.2
- [reakit-system](https://npm.io/package/reakit-system.md) ^0.15.2
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.5.4
- [reakit-warning](https://npm.io/package/reakit-warning.md) ^0.6.2
- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) ^3.1.5

## 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

- 1.3.11 (latest) — 2021-11-18
- 1.4.0-alpha.1 (next) — 2021-04-25
- 1.3.10 — 2021-09-21
- 1.3.9 — 2021-09-06
- 1.3.8 — 2021-04-23
- 1.3.7 — 2021-04-01
- 1.3.6 — 2021-03-01
- 1.3.5 — 2021-01-21
- 1.4.0-alpha.0 — 2021-01-07
- 1.3.4 — 2021-01-06
- 1.3.3 — 2021-01-03
- 1.3.2 — 2020-12-11
- 1.3.1 — 2020-11-26
- 1.3.0 — 2020-11-12
- 1.2.6 — 2020-11-12
- … 86 more at https://npm.io/package/reakit/versions

## README

<br>

<p align="center">
  <a href="https://github.com/reakit/reakit/tree/master/logo">
    <img src="https://user-images.githubusercontent.com/3068563/55114952-118f6b00-50c2-11e9-8879-d047e5686284.png" alt="Reakit symbol" width="80" />
  </a>
</p>

<h1 align="center">Reakit</h1>

<p align="center">
  Toolkit for building <a href="https://reakit.io/docs/accessibility">accessible</a> rich web apps with <a href="https://reactjs.org">React</a>.
  <br>
  <a href="https://reakit.io"><strong>Explore website »</strong></a>
</p>

<br>

<p align="center">
  <a href="https://npmjs.org/package/reakit"><img alt="NPM version" src="https://img.shields.io/npm/v/reakit.svg" /></a>
  <a href="https://npmjs.org/package/reakit"><img alt="NPM downloads" src="https://img.shields.io/npm/dm/reakit.svg"></a>
  <a href="https://github.com/reakit/reakit/actions"><img alt="Build Status" src="https://github.com/reakit/reakit/workflows/ci/badge.svg?event=push&branch=master" /></a>
  <a href="https://codecov.io/gh/reakit/reakit"><img src="https://codecov.io/gh/reakit/reakit/branch/master/graph/badge.svg" /></a><br>
  <a href="https://opencollective.com/ariakit"><img alt="Sponsors" src="https://opencollective.com/ariakit/sponsor/badge.svg?label=sponsors" /></a>
  <a href="https://opencollective.com/ariakit"><img alt="Backers" src="https://opencollective.com/ariakit/backer/badge.svg?label=backers" /></a>
  <a href="https://twitter.com/reakitjs">
    <img alt="Follow Reakit on Twitter" src="https://img.shields.io/twitter/follow/reakitjs.svg"></a>
</p>


## Sponsors

By donating $100 or more you [become a sponsor](https://opencollective.com/ariakit) and help in the development of this project. Thank you to all our sponsors! 🙏

<p>
  <a href="https://opencollective.com/ariakit/sponsor/0/website"><img src="https://opencollective.com/ariakit/sponsor/0/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/sponsor/1/website"><img src="https://opencollective.com/ariakit/sponsor/1/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/sponsor/2/website"><img src="https://opencollective.com/ariakit/sponsor/2/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/sponsor/3/website"><img src="https://opencollective.com/ariakit/sponsor/3/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/sponsor/4/website"><img src="https://opencollective.com/ariakit/sponsor/4/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/sponsor/5/website"><img src="https://opencollective.com/ariakit/sponsor/5/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/sponsor/6/website"><img src="https://opencollective.com/ariakit/sponsor/6/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/sponsor/7/website"><img src="https://opencollective.com/ariakit/sponsor/7/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/sponsor/8/website"><img src="https://opencollective.com/ariakit/sponsor/8/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/sponsor/9/website"><img src="https://opencollective.com/ariakit/sponsor/9/avatar.svg"></a>
</p>

## Backers

By donating $5 or more you [become a backer](https://opencollective.com/ariakit) and help in the development of this project. Thank you to all our backers! 🙏

<p>
  <a href="https://opencollective.com/ariakit/backer/0/website"><img src="https://opencollective.com/ariakit/backer/0/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/1/website"><img src="https://opencollective.com/ariakit/backer/1/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/2/website"><img src="https://opencollective.com/ariakit/backer/2/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/3/website"><img src="https://opencollective.com/ariakit/backer/3/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/4/website"><img src="https://opencollective.com/ariakit/backer/4/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/5/website"><img src="https://opencollective.com/ariakit/backer/5/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/6/website"><img src="https://opencollective.com/ariakit/backer/6/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/7/website"><img src="https://opencollective.com/ariakit/backer/7/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/8/website"><img src="https://opencollective.com/ariakit/backer/8/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/9/website"><img src="https://opencollective.com/ariakit/backer/9/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/10/website"><img src="https://opencollective.com/ariakit/backer/10/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/11/website"><img src="https://opencollective.com/ariakit/backer/11/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/12/website"><img src="https://opencollective.com/ariakit/backer/12/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/13/website"><img src="https://opencollective.com/ariakit/backer/13/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/14/website"><img src="https://opencollective.com/ariakit/backer/14/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/15/website"><img src="https://opencollective.com/ariakit/backer/15/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/16/website"><img src="https://opencollective.com/ariakit/backer/16/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/17/website"><img src="https://opencollective.com/ariakit/backer/17/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/18/website"><img src="https://opencollective.com/ariakit/backer/18/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/19/website"><img src="https://opencollective.com/ariakit/backer/19/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/20/website"><img src="https://opencollective.com/ariakit/backer/20/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/21/website"><img src="https://opencollective.com/ariakit/backer/21/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/22/website"><img src="https://opencollective.com/ariakit/backer/22/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/23/website"><img src="https://opencollective.com/ariakit/backer/23/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/24/website"><img src="https://opencollective.com/ariakit/backer/24/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/25/website"><img src="https://opencollective.com/ariakit/backer/25/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/26/website"><img src="https://opencollective.com/ariakit/backer/26/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/27/website"><img src="https://opencollective.com/ariakit/backer/27/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/28/website"><img src="https://opencollective.com/ariakit/backer/28/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/29/website"><img src="https://opencollective.com/ariakit/backer/29/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/30/website"><img src="https://opencollective.com/ariakit/backer/30/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/31/website"><img src="https://opencollective.com/ariakit/backer/31/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/32/website"><img src="https://opencollective.com/ariakit/backer/32/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/33/website"><img src="https://opencollective.com/ariakit/backer/33/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/34/website"><img src="https://opencollective.com/ariakit/backer/34/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/35/website"><img src="https://opencollective.com/ariakit/backer/35/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/36/website"><img src="https://opencollective.com/ariakit/backer/36/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/37/website"><img src="https://opencollective.com/ariakit/backer/37/avatar.svg"></a>
  <a href="https://opencollective.com/ariakit/backer/38/website"><img src="https://opencollective.com/ariakit/backer/38/avatar.svg"></a>
</p>


## Installation

npm:
```sh
npm i reakit
```

Yarn:
```sh
yarn add reakit
```

> Thanks to [@nosebit](https://github.com/nosebit) for the package name on npm.


## Usage

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { useDialogState, Dialog, DialogDisclosure } from "reakit";

function App() {
  const dialog = useDialogState();
  return (
    <div>
      <DialogDisclosure {...dialog}>Open dialog</DialogDisclosure>
      <Dialog {...dialog} aria-label="Welcome">
        Welcome to Reakit!
      </Dialog>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
```

Play with this on [CodeSandbox](https://codesandbox.io/s/m4n32vjkoj) and read the [documentation](https://reakit.io/docs) to learn more.


## Contributors

This project exists thanks to all the people who contribute. Learn more on the [contributing guide](https://github.com/reakit/reakit/blob/master/CONTRIBUTING.md).

<a href="https://github.com/reakit/reakit/graphs/contributors"><img src="https://opencollective.com/ariakit/contributors.svg?width=1227&button=false" /></a>

<img src="https://user-images.githubusercontent.com/3068563/55114952-118f6b00-50c2-11e9-8879-d047e5686284.png" alt="reakit" height="12" /> [Logo](https://github.com/reakit/reakit/tree/master/logo) by [**Leonardo Elias**](https://github.com/leonardoelias).


## Attribution

Browser testing provided by 
<a href="https://www.browserstack.com" target="_blank"><img src="https://user-images.githubusercontent.com/15015324/45184727-368fbf80-b1fe-11e8-8827-08dbc80b0fb1.png" height="80" align="center"></a>


## License

MIT © [Diego Haz](https://github.com/diegohaz)

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