react-motion-drawer
Example | Usage | API | Changelog
Navigation drawer built with the awesome react-motion by @chenglou and react-hammerjs by @JedWatson
Example
A live demo is available here!
To run the example locally, run:
$ yarn $ yarn serveInstallation
Via npm:
npm install react-motion-drawer Usage
import Drawer from 'react-motion-drawer'; <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.
body { overflow: hidden; }Hooking into the animation
You can hook into the animation by passing a function as the child component.
<Drawer open={false} width={300} onChange={onChange}> { val => <ul style={{ opacity: 300 / val }}> <li>Home</li> <li>About</li> <li>Settings</li> </ul> } </Drawer>API
Props
| 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
