0.1.6 • Published 3 years ago
drawer-navigation v0.1.6
About
drawer-navigation is a drawer navigation solution for react web apps.
Getting Started
Install the pacakage :
npm i drawer-navigationyarn add drawer-navigationInclude in your project
import Drawer from 'drawer-navigation/Drawer<Drawer
routes={[{url:"/",component:<Home/>,label:"Home"},{url:"/shop",component:<h1>About</h1>,label:"Shop"}]}
mainContainerStyles={{
display:"flex",
flexDirection:"column",
justifyContent:"center",
alignItems:"center",
width:"100%",
height:"100%"
}}
hamburgerIconColor="red"
drawerCloseColor="orange"
drawerBackgroundColor="blue"
drawerLabelsStyle={{border:"2.5px solid orange",width:"auto",color:"orange",fontFamily:"monospace",padding:12,margin:2}}
/>Props
| Props | Details | Example |
|---|---|---|
| routes | takes an array of objects:{url:"/your-page",component<YourPage/>,label:"Your Page"} | |
| mainContainerStyles | Styles the containing element that holds the main view takes a styles object : {width:200,height:200} | |
| drawerLabelsStyle | Styles the drawer element that holds the main view takes a styles object : {width:200,height:200} | |
| hamburgerIconColor | color for the hamburger icon that opens teh drawer , takes a string | "red" |
| drawerCloseColor | color for the close drawer icon that closes the drawer , takes a string | "orange" |
| drawerBackgroundColor | drawer background color , takes a string | "green" |