react-drag-drawer
Mobile draggable drawer that falls back to modals on desktop
Install
$ npm install react-drag-drawer --save
Usage
{ let toggle = thisstate this} { const open = thisstate return <Drawer open=open onRequestClose=thistoggle > <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
{}
License
MIT © Jack Hanford