react-drag-drawer

Mobile draggable drawer that falls back to modals on desktop

Live demo!

Install

$ npm install react-drag-drawer --save

Usage

import Drawer from 'react-drag-drawer'

..

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

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

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 consumer if the drawer will close at touch release | false | | allowClose | Boolean | block closing if allowClose={false}, default is true | false | | modalElementClass | String | className to be applied to top element | false | | containerElementClass | String | className to be applied to the drawer container element | 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 | | getModalRef | Function | get modal (draggable element) ref | false | | getContainerRef | Function | get container (overlay) ref | 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;
  }
}

License

MIT © Jack Hanford