Skip to content

Commit 85c699c

Browse files
committed
[changed] State -> IsActive
1 parent f07c696 commit 85c699c

File tree

5 files changed

+45
-43
lines changed

5 files changed

+45
-43
lines changed

doc/03 Mixins/State.md

Lines changed: 0 additions & 37 deletions
This file was deleted.

docs/IsActive.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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+

docs/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,7 @@
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)

modules/State.js renamed to modules/IsActiveMixin.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import React from 'react';
33
var { 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;

modules/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export Route from './Route';
1111
export Lifecycle from './Lifecycle';
1212
export Navigation from './Navigation';
1313
export RouteContext from './RouteContext';
14-
export State from './State';
14+
export IsActive from './IsActiveMixin';
1515

1616
/* utils */
1717
export useRoutes from './useRoutes';

0 commit comments

Comments
 (0)