reakit/README.md

Toolkit for building accessible rich web apps with React

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