Providing pre-built components

README.md

@@ -13,6 +13,23 @@ Wrap your React-Bootstrap element in a `<LinkContainer>` to make it behave like
 
 For the equivalent of `<IndexLink>`, use `<IndexLinkContainer>`.
 
+## Pre-built components
+
+Common navigation components already have a prebuilt version to make usage easier. For example `ButtonLink`:
+
+```js
+<ButtonLink to={{ pathname: '/foo', query: { bar: 'baz' } }} />
+```
+
+Just add the property `onlyActiveOnIndex` to make it behave like a React Router `<IndexLink>`.
+
+Here is a list of the pre-built components:
+- `ButtonLink`
+- `NavItemLink`
+- `MenuItemLink`
+- `ListGroupItemLink`
+
+
 ## Installation
 
 ```

src/ButtonLink.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from 'react-bootstrap';
+
+import LinkContainer from './LinkContainer';
+
+const propTypes = {
+  children: React.PropTypes.node,
+};
+
+// Don't use a stateless function, to allow users to set a ref.
+/* eslint-disable react/prefer-stateless-function */
+class ButtonLink extends React.Component {
+  render() {
+    return (
+      <LinkContainer {...this.props}>
+        <Button>
+          {this.props.children}
+        </Button>
+      </LinkContainer>
+    );
+  }
+}
+/* eslint-enable react/prefer-stateless-function */
+
+ButtonLink.propTypes = propTypes;
+
+export default ButtonLink;

src/ListGroupItemLink.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ListGroupItem } from 'react-bootstrap';
+
+import LinkContainer from './LinkContainer';
+
+const propTypes = {
+  children: React.PropTypes.node,
+};
+
+// Don't use a stateless function, to allow users to set a ref.
+/* eslint-disable react/prefer-stateless-function */
+class ListGroupItemLink extends React.Component {
+  render() {
+    return (
+      <LinkContainer {...this.props}>
+        <ListGroupItem>
+          {this.props.children}
+        </ListGroupItem>
+      </LinkContainer>
+    );
+  }
+}
+/* eslint-enable react/prefer-stateless-function */
+
+ListGroupItemLink.propTypes = propTypes;
+
+export default ListGroupItemLink;

src/MenuItemLink.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { MenuItem } from 'react-bootstrap';
+
+import LinkContainer from './LinkContainer';
+
+const propTypes = {
+  children: React.PropTypes.node,
+};
+
+// Don't use a stateless function, to allow users to set a ref.
+/* eslint-disable react/prefer-stateless-function */
+class MenuItemLink extends React.Component {
+  render() {
+    return (
+      <LinkContainer {...this.props}>
+        <MenuItem>
+          {this.props.children}
+        </MenuItem>
+      </LinkContainer>
+    );
+  }
+}
+/* eslint-enable react/prefer-stateless-function */
+
+MenuItemLink.propTypes = propTypes;
+
+export default MenuItemLink;

src/NavItemLink.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { NavItem } from 'react-bootstrap';
+
+import LinkContainer from './LinkContainer';
+
+const propTypes = {
+  children: React.PropTypes.node,
+};
+
+// Don't use a stateless function, to allow users to set a ref.
+/* eslint-disable react/prefer-stateless-function */
+class NavItemLink extends React.Component {
+  render() {
+    return (
+      <LinkContainer {...this.props}>
+        <NavItem>
+          {this.props.children}
+        </NavItem>
+      </LinkContainer>
+    );
+  }
+}
+/* eslint-enable react/prefer-stateless-function */
+
+NavItemLink.propTypes = propTypes;
+
+export default NavItemLink;

src/index.js

@@ -1,2 +1,6 @@
 export IndexLinkContainer from './IndexLinkContainer';
 export LinkContainer from './LinkContainer';
+export ButtonLink from './ButtonLink';
+export NavItemLink from './NavItemLink';
+export MenuItemLink from './MenuItemLink';
+export ListGroupItemLink from './ListGroupItemLink';

test/visual/ButtonVisual.js

@@ -3,7 +3,7 @@ import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
 import Button from 'react-bootstrap/lib/Button';
 import { Link } from 'react-router';
 
-import LinkContainer from '../../src/LinkContainer';
+import ButtonLink from '../../src/ButtonLink';
 
 export default () => (
   <div>
@@ -20,26 +20,14 @@ export default () => (
       <Button bsStyle="link">Link</Button>
     </ButtonToolbar>
 
-    <h3>LinkContainer</h3>
+    <h3>ButtonLink</h3>
     <ButtonToolbar>
-      <LinkContainer to="/home">
-        <Button>Default</Button>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <Button bsStyle="success">Success</Button>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <Button bsStyle="info">Info</Button>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <Button bsStyle="warning">Warning</Button>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <Button bsStyle="danger">Danger</Button>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <Button bsStyle="link">Link</Button>
-      </LinkContainer>
+      <ButtonLink to="/home">Default</ButtonLink>
+      <ButtonLink to="/home" bsStyle="success">Success</ButtonLink>
+      <ButtonLink to="/home" bsStyle="info">Info</ButtonLink>
+      <ButtonLink to="/home" bsStyle="warning">Warning</ButtonLink>
+      <ButtonLink to="/home" bsStyle="danger">Danger</ButtonLink>
+      <ButtonLink to="/home" bsStyle="link">Link</ButtonLink>
     </ButtonToolbar>
   </div>
 );

test/visual/ListGroupItemVisual.js

@@ -3,7 +3,7 @@ import ListGroup from 'react-bootstrap/lib/ListGroup';
 import ListGroupItem from 'react-bootstrap/lib/ListGroupItem';
 import { Link } from 'react-router';
 
-import LinkContainer from '../../src/LinkContainer';
+import ListGroupItemLink from '../../src/ListGroupItemLink';
 
 export default () => (
   <div>
@@ -35,43 +35,29 @@ export default () => (
       </ListGroupItem>
     </ListGroup>
 
-    <h3>LinkContainer</h3>
+    <h3>ListGroupItemLink</h3>
     <ListGroup>
-      <LinkContainer to="/list-group-item">
-        <ListGroupItem header="ListGroupItem 1 Heading">
+      <ListGroupItemLink to="/list-group-item" header="ListGroupItem 1 Heading">
           ListGroupItem 1 content
-        </ListGroupItem>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <ListGroupItem header="ListGroupItem 2 Heading">
+      </ListGroupItemLink>
+      <ListGroupItemLink to="/home" header="ListGroupItem 2 Heading">
           ListGroupItem 2 content
-        </ListGroupItem>
-      </LinkContainer>
-      <LinkContainer to="/home" disabled>
-        <ListGroupItem>
+      </ListGroupItemLink>
+      <ListGroupItemLink to="/home" disabled>
           ListGroupItem 3 content disabled
-        </ListGroupItem>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <ListGroupItem bsStyle="success">
+      </ListGroupItemLink>
+      <ListGroupItemLink to="/home" bsStyle="success">
           ListGroupItem 4 content success
-        </ListGroupItem>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <ListGroupItem bsStyle="info">
+      </ListGroupItemLink>
+      <ListGroupItemLink to="/home" bsStyle="info">
           ListGroupItem 5 content info
-        </ListGroupItem>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <ListGroupItem bsStyle="warning">
+      </ListGroupItemLink>
+      <ListGroupItemLink to="/home" bsStyle="warning">
           ListGroupItem 6 content warning
-        </ListGroupItem>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <ListGroupItem bsStyle="danger">
+      </ListGroupItemLink>
+      <ListGroupItemLink to="/home" bsStyle="danger">
           ListGroupItem 7 content danger
-        </ListGroupItem>
-      </LinkContainer>
+      </ListGroupItemLink>
     </ListGroup>
   </div>
 );

test/visual/MenuItemVisual.js

@@ -4,7 +4,7 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
 import SplitButton from 'react-bootstrap/lib/SplitButton';
 import { Link } from 'react-router';
 
-import LinkContainer from '../../src/LinkContainer';
+import MenuItemLink from '../../src/MenuItemLink';
 
 export default () => (
   <div>
@@ -22,22 +22,14 @@ export default () => (
       </SplitButton>
     </ButtonToolbar>
 
-    <h3>LinkContainer</h3>
+    <h3>MenuItemLink</h3>
     <ButtonToolbar>
       <SplitButton title="Dropdown">
-        <LinkContainer to="/home">
-          <MenuItem>Action</MenuItem>
-        </LinkContainer>
-        <LinkContainer to="/menu-item">
-          <MenuItem>Active action</MenuItem>
-        </LinkContainer>
-        <LinkContainer to="/home">
-          <MenuItem>Another action</MenuItem>
-        </LinkContainer>
+        <MenuItemLink to="/home">Action</MenuItemLink>
+        <MenuItemLink to="/menu-item">Active action</MenuItemLink>
+        <MenuItemLink to="/home">Another action</MenuItemLink>
         <MenuItem divider />
-        <LinkContainer to="/home">
-          <MenuItem>Separated link</MenuItem>
-        </LinkContainer>
+        <MenuItemLink to="/home">Separated link</MenuItemLink>
       </SplitButton>
     </ButtonToolbar>
   </div>

test/visual/NavItemVisual.js

@@ -3,7 +3,7 @@ import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
 import { Link } from 'react-router';
 
-import LinkContainer from '../../src/LinkContainer';
+import NavItemLink from '../../src/NavItemLink';
 
 export default () => (
   <div>
@@ -17,17 +17,11 @@ export default () => (
       <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
     </Nav>
 
-    <h3>LinkContainer</h3>
+    <h3>NavItemLink</h3>
     <Nav bsStyle="pills">
-      <LinkContainer to="/nav-item">
-        <NavItem>NavItem 1 content</NavItem>
-      </LinkContainer>
-      <LinkContainer to="/home">
-        <NavItem>NavItem 2 content</NavItem>
-      </LinkContainer>
-      <LinkContainer to="/home" disabled>
-        <NavItem>NavItem 3 content</NavItem>
-      </LinkContainer>
+      <NavItemLink to="/nav-item">NavItem 1 content</NavItemLink>
+      <NavItemLink to="/home">NavItem 2 content</NavItemLink>
+      <NavItemLink to="/home" disabled>NavItem 3 content</NavItemLink>
     </Nav>
   </div>
 );