File tree Expand file tree Collapse file tree 5 files changed +45
-43
lines changed Expand file tree Collapse file tree 5 files changed +45
-43
lines changed 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 14
14
- [ Plain Route] (Plain Route.md)
15
15
- [ Redirect] ( Redirect.md )
16
16
- [ Link] ( Link.md )
17
+ - [ Navigation] ( Navigation.md )
18
+ - [ IsActive] ( IsActive.md )
17
19
18
20
- [ Server Rendering] ( ServerRendering.md )
Original file line number Diff line number Diff line change @@ -3,15 +3,15 @@ import React from 'react';
3
3
var { object } = React . PropTypes ;
4
4
5
5
/**
6
- * The State mixin provides components with an isActive(pathname, query)
6
+ * The IsActive mixin provides components with an isActive(pathname, query)
7
7
* method they can use to check if a given pathname/query are active.
8
8
*
9
9
* Example:
10
10
*
11
- * import { State } from 'react-router';
11
+ * import { IsActive } from 'react-router';
12
12
*
13
13
* var AboutLink = React.createClass({
14
- * mixins: [ State ],
14
+ * mixins: [ IsActive ],
15
15
* render() {
16
16
* var className = this.props.className;
17
17
*
@@ -22,7 +22,7 @@ var { object } = React.PropTypes;
22
22
* }
23
23
* });
24
24
*/
25
- var State = {
25
+ var IsActive = {
26
26
27
27
contextTypes : {
28
28
history : object . isRequired
@@ -34,4 +34,4 @@ var State = {
34
34
35
35
} ;
36
36
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';
11
11
export Lifecycle from './Lifecycle' ;
12
12
export Navigation from './Navigation' ;
13
13
export RouteContext from './RouteContext' ;
14
- export State from './State ' ;
14
+ export IsActive from './IsActiveMixin ' ;
15
15
16
16
/* utils */
17
17
export useRoutes from './useRoutes' ;
You can’t perform that action at this time.
0 commit comments