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