react-drag-drawer

A responsive mobile drawer that is draggable on mobile, and falls back to a modal on desktop.

View demo Download Source

Install

$ npm install react-drag-drawer --save

Usage

import Drawer from 'react-drag-drawer'

..

toggle = () => {
  let { toggle } = this.state

  this.setState({ toggle: !toggle })
}

logState = () => {
  console.log(`Drawer now ${this.state.open ? 'open' : 'closed'}`)
}

render () {
  const { open } = this.state

  return (
    <Drawer
      open={open}
      onRequestClose={this.toggle}
    >
      <div>Hey Im inside the drawer!</div>
    </Drawer>
  )
}

API

Param Type functionality required
open Boolean null true
children Node null true
onRequestClose Function null true
onDrag Function invoked on drag false
onOpen Function invoked on drawer focus false
notifyWillClose Function notify HOC if the drawer will close false
allowClose Boolean block closing if allowClose={false}, default is true false
modalElementClass Object className to be applied to top element false
containerStyle Object styles to be applied to the drawer container false
parentElement ref block scrolls on element if you're not using body scrolling false
direction String direction to translate drawer false
dontApplyListeners Boolean skip applying internal event listeners to the dom false
inViewportChange Function detect when drawer is at top of viewport false

Example modal style

.modal {
  outline: none;
  background: white;
  font-size: 1.6rem;
  width: 76rem;
  max-width: 90%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  z-index: 15;
  min-height: 47rem;

  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 768px) {
  .modal {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

GitHub