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

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

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