0.0.3 • Published 3 years ago
rjs-navbar v0.0.3
About
rjs-navbar is a navigational header component for react web apps.
Getting Started
Install with npm:
npm i rjs-navbar
Install with yarn
yarn add rjs-navbar
Include in your project
import Navbar from 'rjs-navbar/Navbar';<Navbar
logo={<img src="http://mrmrs.github.io/photos/u/011.jpg" style={{width:'100%',height:'100%'}}/>}
activeLabel={(val) => setGoto(val)}
searchQuery={(val) => setGoto(val)}
left={"search"}
center={["item 1", "item2","item 1", "item2"]}
right={"logo"}
search={true}
foreGroundStyle={{color:'white',padding:3,border:'1px solid white',width:'100%', margin:2,fontSize:17, fontWeight:'bold'}}
backGroundStyle={{background:'linear-gradient(to right, rgb(0, 0, 255), rgb(255, 0, 0))',opacity:0.9}}
searchStyle={{border:'1px solid green', width:200, height:30}}
/>Props
| Props | Details | Examples |
|---|---|---|
| logo | can be a string or a react component | <img src="http://mrmrs.github.io/photos/u/011.jpg"style={{width:'100%',height:'100%'}}/> |
| activeLabel | returns the selected label | {(val) => setGoto(val)} |
| searchQuery | returns the search query | {(val) => setGoto(val)} |
| left | left side component of navbar can be on of : "search","logo" or and array of labels | "item 1", "item 2" , "logo" |
| center | center component of navbar can be on of : "search","logo" or and array of labels | "item 1", "item 2" , "logo" |
| right | right side component of navbar can be on of : "search","logo" or and array of labels | "item 1", "item 2" , "logo" |
| search | sets the search input, can be true or false | search={true} |
| foreGround | object containg styles for the foreground | {color:'white',padding:3,border:'1px solid white',width:'100%', margin:2,fontSize:17, fontWeight:'bold'} |
| backGroundStyle | object containing styles for the background | {background:'linear-gradient(to right, rgb(0, 0, 255), rgb(255, 0, 0))',opacity:0.9} |
| searchStyle | object containing styles for the search input box | {border:'1px solid green', width:200, height:30} |
![http://mrmrs.github.io/photos/u/011.jpg"style={{width:'100%',height:'100%'}}/>](http://mrmrs.github.io/photos/u/011.jpg"style={{width:'100%',height:'100%'}}/>){kind=link}