diff --git a/doc/03 Mixins/State.md b/doc/03 Mixins/State.md deleted file mode 100644 index a937fb112f..0000000000 --- a/doc/03 Mixins/State.md +++ /dev/null @@ -1,37 +0,0 @@ -Mixes in the `isActive` method of `Router`. - -Methods -------- - -### isActive - -See [router.isActive][router.isActive] - -Example -------- - -Let's say you are using bootstrap and want to get `active` on those `li` -tags for the Tabs: - -```js -import { Link, State } from 'react-router'; - -var Tab = React.createClass({ - - mixins: [ State ], - - render() { - var isActive = this.isActive(this.props.href, this.props.query); - var className = isActive ? 'active' : ''; - return
  • ; - } - -}); - -// use it just like , and you'll get an anchor wrapped in an `li` -// with an automatic `active` class on both. -Foo -``` - - [router.isActive]:#TODO - diff --git a/docs/IsActive.md b/docs/IsActive.md new file mode 100644 index 0000000000..63fcac8798 --- /dev/null +++ b/docs/IsActive.md @@ -0,0 +1,37 @@ +# IsActive Mixin + +Provides `isActive` to a component. + +## Methods + +### `isActive(pathname, query)` + +Returns `true` or `false` depending on if the current path is active. +Will be true for every route in the route branch matched by the +`pathname` (child route is active, therefore parent is too). + +## Example + +Let's say you are using bootstrap and want to get `active` on those `li` +tags for the Tabs: + +```js +import { Link, IsActive } from 'react-router'; + +let Tab = React.createClass({ + + mixins: [ IsActive ], + + render() { + let isActive = this.isActive(this.props.to, this.props.query); + let className = isActive ? 'active' : ''; + return
  • ; + } + +}); + +// use it just like , and you'll get an anchor wrapped in an `li` +// with an automatic `active` class on both. +Foo +``` + diff --git a/docs/README.md b/docs/README.md index f093049a7e..f3a15dcbba 100644 --- a/docs/README.md +++ b/docs/README.md @@ -14,5 +14,7 @@ - [Plain Route](Plain Route.md) - [Redirect](Redirect.md) - [Link](Link.md) + - [Navigation](Navigation.md) + - [IsActive](IsActive.md) - [Server Rendering](ServerRendering.md) diff --git a/modules/State.js b/modules/IsActiveMixin.js similarity index 76% rename from modules/State.js rename to modules/IsActiveMixin.js index 5b6d9d3db5..5af896eeaa 100644 --- a/modules/State.js +++ b/modules/IsActiveMixin.js @@ -3,15 +3,15 @@ import React from 'react'; var { object } = React.PropTypes; /** - * The State mixin provides components with an isActive(pathname, query) + * The IsActive mixin provides components with an isActive(pathname, query) * method they can use to check if a given pathname/query are active. * * Example: * - * import { State } from 'react-router'; + * import { IsActive } from 'react-router'; * * var AboutLink = React.createClass({ - * mixins: [ State ], + * mixins: [ IsActive ], * render() { * var className = this.props.className; * @@ -22,7 +22,7 @@ var { object } = React.PropTypes; * } * }); */ -var State = { +var IsActive = { contextTypes: { history: object.isRequired @@ -34,4 +34,4 @@ var State = { }; -export default State; +export default IsActive; diff --git a/modules/index.js b/modules/index.js index e6cd160e75..cd92716f7a 100644 --- a/modules/index.js +++ b/modules/index.js @@ -11,7 +11,7 @@ export Route from './Route'; export Lifecycle from './Lifecycle'; export Navigation from './Navigation'; export RouteContext from './RouteContext'; -export State from './State'; +export IsActive from './IsActiveMixin'; /* utils */ export useRoutes from './useRoutes';