diff --git a/README.md b/README.md index 2b5bb34..fc54cf8 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,23 @@ Wrap your React-Bootstrap element in a `` to make it behave like For the equivalent of ``, use ``. +## Pre-built components + +Common navigation components already have a prebuilt version to make usage easier. For example `ButtonLink`: + +```js + +``` + +Just add the property `onlyActiveOnIndex` to make it behave like a React Router ``. + +Here is a list of the pre-built components: +- `ButtonLink` +- `NavItemLink` +- `MenuItemLink` +- `ListGroupItemLink` + + ## Installation ``` diff --git a/src/ButtonLink.js b/src/ButtonLink.js new file mode 100644 index 0000000..0a71a95 --- /dev/null +++ b/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 ( + + + + ); + } +} +/* eslint-enable react/prefer-stateless-function */ + +ButtonLink.propTypes = propTypes; + +export default ButtonLink; diff --git a/src/ListGroupItemLink.js b/src/ListGroupItemLink.js new file mode 100644 index 0000000..44ce6b5 --- /dev/null +++ b/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 ( + + + {this.props.children} + + + ); + } +} +/* eslint-enable react/prefer-stateless-function */ + +ListGroupItemLink.propTypes = propTypes; + +export default ListGroupItemLink; diff --git a/src/MenuItemLink.js b/src/MenuItemLink.js new file mode 100644 index 0000000..efafd12 --- /dev/null +++ b/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 ( + + + {this.props.children} + + + ); + } +} +/* eslint-enable react/prefer-stateless-function */ + +MenuItemLink.propTypes = propTypes; + +export default MenuItemLink; diff --git a/src/NavItemLink.js b/src/NavItemLink.js new file mode 100644 index 0000000..cc9409b --- /dev/null +++ b/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 ( + + + {this.props.children} + + + ); + } +} +/* eslint-enable react/prefer-stateless-function */ + +NavItemLink.propTypes = propTypes; + +export default NavItemLink; diff --git a/src/index.js b/src/index.js index 5fd05e4..f234d8d 100644 --- a/src/index.js +++ b/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'; diff --git a/test/visual/ButtonVisual.js b/test/visual/ButtonVisual.js index da54a81..bf43dbe 100644 --- a/test/visual/ButtonVisual.js +++ b/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 () => (
@@ -20,26 +20,14 @@ export default () => ( -

LinkContainer

+

ButtonLink

- - - - - - - - - - - - - - - - - - + Default + Success + Info + Warning + Danger + Link
); diff --git a/test/visual/ListGroupItemVisual.js b/test/visual/ListGroupItemVisual.js index 75f2ff1..dbf5f1f 100644 --- a/test/visual/ListGroupItemVisual.js +++ b/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 () => (
@@ -35,43 +35,29 @@ export default () => ( -

LinkContainer

+

ListGroupItemLink

- - + ListGroupItem 1 content - - - - + + ListGroupItem 2 content - - - - + + ListGroupItem 3 content disabled - - - - + + ListGroupItem 4 content success - - - - + + ListGroupItem 5 content info - - - - + + ListGroupItem 6 content warning - - - - + + ListGroupItem 7 content danger - - +
); diff --git a/test/visual/MenuItemVisual.js b/test/visual/MenuItemVisual.js index 0359f40..64f50b8 100644 --- a/test/visual/MenuItemVisual.js +++ b/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 () => (
@@ -22,22 +22,14 @@ export default () => ( -

LinkContainer

+

MenuItemLink

- - Action - - - Active action - - - Another action - + Action + Active action + Another action - - Separated link - + Separated link
diff --git a/test/visual/NavItemVisual.js b/test/visual/NavItemVisual.js index 3b957b7..3f6c17f 100644 --- a/test/visual/NavItemVisual.js +++ b/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 () => (
@@ -17,17 +17,11 @@ export default () => ( NavItem 3 content -

LinkContainer

+

NavItemLink

);