Navigation drawer built with the awesome react-motion and react-hammerjs
npm install react-motion-drawer-alt Example |
Usage |
API |
Changelog

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

A live demo is available here!
To run the example locally, run:
``bash`
$ yarn
$ yarn serve
Via npm:
``
npm install react-motion-drawer
`js`
import Drawer from 'react-motion-drawer';
`jsx`
If you want the drawer on the right side of the screen you need the following css.
`css`
body {
overflow: hidden;
}
You can hook into the animation by passing a function as the child component.
`jsx`
{ val =>
}
| Prop Name | type | default | description |
|----------------------|---------|--------------------------|----------------------------------------------------------|
| zIndex | number | 10000 | z-index of the drawer |false
| noTouchOpen | bool | | can a user pan to open |false
| noTouchClose | bool | | can a user pan to close |() => {}
| onChange | func | | called when the drawer is open |null
| drawerStyle | object | | additional drawer styles |null
| className | object | | additional drawer className |null
| overlayClassName | object | | additional overlay className |null
| config | object | | configuration of the react-motion animation |false
| open | bool | | states if the drawer is open |300
| width | number | | width of the drawer |100%
| height | number | | height of the drawer |20
| handleWidth | number | | width of the handle |50
| peakingWidth | number | | width that the drawer peaks on press |50
| panTolerance | number | | tolerance until the drawer starts to move |false
| right | bool | | drawer on the right side of the screen |'rgba(0, 0, 0, 0.4)'
| overlayColor | string | | color of the overlay |false
| fadeOut | bool | | fade out |0` | offset of the drawer |
| offset | number |
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