react-drag-drawer
Mobile draggable drawer that falls back to modals on desktop
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
