File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Load Diff This file was deleted.
Original file line number Diff line number Diff line change 1+ # IsActive Mixin
2+
3+ Provides ` isActive ` to a component.
4+
5+ ## Methods
6+
7+ ### ` isActive(pathname, query) `
8+
9+ Returns ` true ` or ` false ` depending on if the current path is active.
10+ Will be true for every route in the route branch matched by the
11+ ` pathname ` (child route is active, therefore parent is too).
12+
13+ ## Example
14+
15+ Let's say you are using bootstrap and want to get ` active ` on those ` li `
16+ tags for the Tabs:
17+
18+ ``` js
19+ import { Link , IsActive } from ' react-router' ;
20+
21+ let Tab = React .createClass ({
22+
23+ mixins: [ IsActive ],
24+
25+ render () {
26+ let isActive = this .isActive (this .props .to , this .props .query );
27+ let className = isActive ? ' active' : ' ' ;
28+ return < li className= {className}>< Link {... this .props }/ >< / li> ;
29+ }
30+
31+ });
32+
33+ // use it just like <Link/>, and you'll get an anchor wrapped in an `li`
34+ // with an automatic `active` class on both.
35+ < Tab href= " foo" > Foo< / Tab>
36+ ```
37+
Original file line number Diff line number Diff line change 1414 - [ Plain Route] (Plain Route.md)
1515 - [ Redirect] ( Redirect.md )
1616 - [ Link] ( Link.md )
17+ - [ Navigation] ( Navigation.md )
18+ - [ IsActive] ( IsActive.md )
1719
1820- [ Server Rendering] ( ServerRendering.md )
Original file line number Diff line number Diff line change @@ -3,15 +3,15 @@ import React from 'react';
33var { object } = React . PropTypes ;
44
55/**
6- * The State mixin provides components with an isActive(pathname, query)
6+ * The IsActive mixin provides components with an isActive(pathname, query)
77 * method they can use to check if a given pathname/query are active.
88 *
99 * Example:
1010 *
11- * import { State } from 'react-router';
11+ * import { IsActive } from 'react-router';
1212 *
1313 * var AboutLink = React.createClass({
14- * mixins: [ State ],
14+ * mixins: [ IsActive ],
1515 * render() {
1616 * var className = this.props.className;
1717 *
@@ -22,7 +22,7 @@ var { object } = React.PropTypes;
2222 * }
2323 * });
2424 */
25- var State = {
25+ var IsActive = {
2626
2727 contextTypes : {
2828 history : object . isRequired
@@ -34,4 +34,4 @@ var State = {
3434
3535} ;
3636
37- export default State ;
37+ export default IsActive ;
Original file line number Diff line number Diff line change @@ -11,7 +11,7 @@ export Route from './Route';
1111export Lifecycle from './Lifecycle' ;
1212export Navigation from './Navigation' ;
1313export RouteContext from './RouteContext' ;
14- export State from './State ' ;
14+ export IsActive from './IsActiveMixin ' ;
1515
1616/* utils */
1717export useRoutes from './useRoutes' ;
You can’t perform that action at this time.
0 commit comments