Skip to content
Drawer built with react-motion
JavaScript HTML
Branch: master
Clone or download


Example | Usage | API | Changelog

Navigation drawer built with the awesome react-motion by @chenglou and react-hammerjs by @JedWatson

npm version


A live demo is available here!

To run the example locally, run:

$ yarn
$ yarn serve


Via npm:

npm install react-motion-drawer


import Drawer from 'react-motion-drawer';
  <Drawer open={false} onChange={onChange}>

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 }}>



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


MIT © Christoph Hermann

You can’t perform that action at this time.