Nuclear Pumpkin Mocha

    @alexkuz/react-router-bootstrap

    0.18.0-beta • Public • Published

    react-router-bootstrap

    Build Status

    Intregation between react-router and react-bootstrap

    This package gives you react-router compatible substitutes for:

    • NavItem -> NavItemLink
    • Button -> ButtonLink
    • MenuItem -> MenuItemLink
    • ListGroupItem -> ListGroupItemLink

    Turning this:

    React.createClass({
      mixins: [State, Navigation],
    
      render: function() {
        var href = this.makeHref('destination', {some: 'params'}, {some: 'query param'});
        var isActive = this.isActive('destination', {some: 'params'}, {some: 'query param'});
        return <Button href={href} active={isActive}>;
      }
    });

    Into this

    React.createClass({
      render: function() {
        return <ButtonLink to="destination" params={{ some: 'params' }} query={{some: 'query param'}}>;
      }
    });

    Installation

    npm install --save react-router-bootstrap
    

    You will also (if you haven't already) want to install react-router and react-bootstrap

    npm install --save react-router react-bootstrap
    

    Usage

    A simple example

    var Router = require('react-router')
      , RouteHandler = Router.RouteHandler
      , Route = Router.Route;
    
    var ReactBootstrap = require('react-bootstrap')
      , Nav = ReactBootstrap.Nav
      , ListGroup = ReactBootstrap.ListGroup;
    
    var ReactRouterBootstrap = require('react-router-bootstrap')
      , NavItemLink = ReactRouterBootstrap.NavItemLink
      , ButtonLink = ReactRouterBootstrap.ButtonLink
      , ListGroupItemLink = ReactRouterBootstrap.ListGroupItemLink;
    
    var App = React.createClass({
      render: function() {
        return (
          <div>
            NavItemLink<br />
            <Nav>
              <NavItemLink
                to="destination"
                params={{ someparam: 'hello' }}>
                Linky!
              </NavItemLink>
            </Nav>
            <br />
            ButtonLink<br />
            <ButtonLink
              to="destination"
              params={{ someparam: 'hello' }}>
              Linky!
            </ButtonLink>
            <br />
            <ListGroup>
              <ListGroupItemLink
                to="destination"
                params={{ someparam: 'hello' }}>
                Linky!
              </ListGroupItemLink>
            </ListGroup>
            <RouteHandler />
          </div>
        );
      }
    });
    
    var Destination = React.createClass({
      render: function() {
        return <div>You made it!</div>;
      }
    });
    
    var routes = (
      <Route handler={App} path="/">
        <Route name="destination" path="destination/:someparam" handler={Destination} />
      </Route>
    );
    
    Router.run(routes, function (Handler) {
      React.render(<Handler/>, document.body);
    });

    Contributing

    See CONTRIBUTING

    Use npm run visual-test command to check components appearance in browser. It will open browser with a blank page. Then after webpack-server finishes its bundling, the browser automatically will refresh the page.

    URL for it: http://localhost:8080/public/visual#/

    Install

    npm i @alexkuz/react-router-bootstrap

    DownloadsWeekly Downloads

    2

    Version

    0.18.0-beta

    License

    Apache-2.0

    Last publish

    Collaborators

    • alexkuz