1.1.2 • Published 6 years ago
react-touch-drawer
Licence
ISC
Version
1.1.2
Deps
5
Size
11 kB
Vulns
0
Weekly
0
React Touch Bottom Drawer with native touch (react-touch-drawer)
###Installation and usage
####Inline code The easiest way to use react-touch-drawer is to install it from npm and build it into your app with Webpack.
$ npm install react-touch-drawer
####Then use it in your app:
import ReactTouchDrawer from 'react-touch-drawer';
const drawerHeight=200
function App() {
return (
<ReactTouchDrawer
heightSet={drawerHeight}
drawerComponent={
({close,open})=>( <div style={{backgroundColor: "blue",height:drawerHeight+'px'}}>hello</div>)
}
>
{
({close,open})=>(
<div className="" style={{background:'red',height:'110vh'}}>
<div onClick={open}>open</div>
<div onClick={close}>close</div>
</div>
)
}
</ReactTouchDrawer>
)
}
export default App;
###Props
| Name | Props | value |
|---|---|---|
| heightSet | 300 (default) | number |
| drawerComponent | component | react componnet |
| bodyAnimation | false | bool |
| drawerBG | rgba(0,0,0,.2) (default) | color(hex,rgba) |
| drawerContainerBg | white (default) | color(hex,rgba) |
| drawerWidth | string | "80%" |
| enabled | true | bool (Stop touch gesture) |