react-motion-drawer

Example |
Usage |
API |
Changelog

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


Example

A live demo is available here!

To run the example locally, run:
``bash
$ yarn
$ yarn serve
`

Installation

Via npm:
`
npm install react-motion-drawer
`

Usage

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

`jsx



• Home


• About


• Settings



`

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

`css
body {
overflow: hidden;
}
`

$3

You can hook into the animation by passing a function as the child component.

`jsx

{ val =>


• Home


• About


• Settings


}

`

API

$3

| Prop Name | type | default | description |
|----------------------|---------|--------------------------|----------------------------------------------------------|
| zIndex | number | 10000 | z-index of the drawer |
| noTouchOpen | bool | false | can a user pan to open |
| noTouchClose | bool | false | can a user pan to close |
| onChange | func | () => {} | called when the drawer is open |
| drawerStyle | object | null | additional drawer styles |
| className | object | null | additional drawer className |
| overlayClassName | object | null | additional overlay className |
| config | object | null | configuration of the react-motion animation |
| open | bool | false | states if the drawer is open |
| width | number | 300 | width of the drawer |
| height | number | 100% | height of the drawer |
| handleWidth | number | 20 | width of the handle |
| peakingWidth | number | 50 | width that the drawer peaks on press |
| panTolerance | number | 50 | tolerance until the drawer starts to move |
| right | bool | false | drawer on the right side of the screen |
| overlayColor | string | 'rgba(0, 0, 0, 0.4)' | color of the overlay |
| fadeOut | bool | false | fade out |
| offset | number | 0` | offset of the drawer |

License

MIT © Christoph Hermann

[rm]: https://github.com/chenglou/react-motion
[rh]: https://github.com/JedWatson/react-hammerjs
[c]: https://github.com/chenglou
[j]: https://github.com/JedWatson