reactnav
v2.0.0
Published
A lightweight responsive navbar for React
Downloads
4
Readme
reactnav
A lightweight responsive navbar for React. reactnav can be used with or without react-router.
Installation
Using npm:
$ npm install --save reactnav
Getting Started
The Navbar component takes a required routeInfo
array as props. routeInfo
should be formatted as an array of objects,
each with a displayName
and link
property. The displayName
and link
values should be strings.
class App extends Component {
render() {
const routeInfo = [
{ displayName: 'ABOUT',
link: '/about',
},
{ displayName: 'HOME',
link: '/home',
},
{ displayName: 'CONTACT',
link: 'https://www.mycontactform.com/',
},
];
}
}
Links can be react-router links to other components or external links.
class App extends Component {
render() {
const routeInfo = [
{ displayName: 'ABOUT',
link: '/about',
},
{ displayName: 'HOME',
link: '/home',
},
{ displayName: 'CONTACT',
link: 'https://www.mycontactform.com/',
},
];
return (
<div>
<Navbar routeInfo={routeInfo} />
{this.props.children}
</div>
);
}
}
ReactDOM.render((
<Router history={hashHistory}>
<Route path='/' component={App}>
<Route path='/about' component={About} />
<Route path='/home' component={Home} />
</Route>
</Router>
), document.getElementById('root'));