reactnav v2.0.0

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'));