<commit_before><h1 align="center">react-motion-drawer</h1>

<p align="center">

  <a href="#example">Example</a> |
  <a href="#usage">Usage</a> |
  <a href="#api">API</a> |
  <a href="CHANGELOG.md">Changelog</a>
  <br><br>
  <img  align="center" src="./media/drawer.gif">
</p>

> Navigation drawer built with the awesome [react-motion][rm] by [@chenglou][c] and [react-hammerjs][rh] by [@JedWatson][j]

[![npm version](https://badge.fury.io/js/react-motion-drawer.svg)](https://badge.fury.io/js/react-motion-drawer)

## Example

To run the example locally, run:
```bash
$ npm install
$ npm run serve
$ npm run open # or open http://localhost:8888/example/index.html in your browser
```

## Usage

```js
import Drawer from 'react-motion-drawer';
```

```jsx
  <Drawer open={false} onChange={onChange}>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Settings</li>
    </ul>
  </Drawer>
```

If you want the drawer on the right side of the screen you need the following css.

```css<commit_msg>docs: add live demo to README<commit_after><h1 align="center">react-motion-drawer</h1>

<p align="center">

  <a href="#example">Example</a> |
  <a href="#usage">Usage</a> |
  <a href="#api">API</a> |
  <a href="CHANGELOG.md">Changelog</a>
  <br><br>
  <img  align="center" src="./media/drawer.gif">
</p>

> Navigation drawer built with the awesome [react-motion][rm] by [@chenglou][c] and [react-hammerjs][rh] by [@JedWatson][j]

[![npm version](https://badge.fury.io/js/react-motion-drawer.svg)](https://badge.fury.io/js/react-motion-drawer)

## Example

A live demo is available [here](https://react-motion-drawer.netlify.com/)!

To run the example locally, run:
```bash
$ npm install
$ npm run serve
$ npm run open # or open http://localhost:8888/example/index.html in your browser
```

## Usage

```js
import Drawer from 'react-motion-drawer';
```

```jsx
  <Drawer open={false} onChange={onChange}>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Settings</li>
    </ul>
  </Drawer>
```

If you want the drawer on the right side of the screen you need the following css.

```css
{'fraction_non_alphanumeric': 0.19714285714285715, 'fraction_numerical': 0.005714285714285714, 'mean_word_length': 4.026315789473684, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 55, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6659117', 'n_tokens_mistral': 827, 'n_tokens_neox': 777, 'n_words': 186}