3.3.0 • Published 5 years ago
react-motion-drawer-improved v3.3.0
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 serve
Installation
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
3.3.0
5 years ago