Skip to content

Commit

Permalink
[changed] State -> IsActive
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanflorence committed Sep 6, 2015
1 parent f07c696 commit 85c699c
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 43 deletions.
37 changes: 0 additions & 37 deletions doc/03 Mixins/State.md

This file was deleted.

37 changes: 37 additions & 0 deletions 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 <li className={className}><Link {...this.props}/></li>;
}

});

// use it just like <Link/>, and you'll get an anchor wrapped in an `li`
// with an automatic `active` class on both.
<Tab href="foo">Foo</Tab>
```

2 changes: 2 additions & 0 deletions docs/README.md
Expand Up @@ -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)
10 changes: 5 additions & 5 deletions modules/State.js → modules/IsActiveMixin.js
Expand Up @@ -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;
*
Expand All @@ -22,7 +22,7 @@ var { object } = React.PropTypes;
* }
* });
*/
var State = {
var IsActive = {

contextTypes: {
history: object.isRequired
Expand All @@ -34,4 +34,4 @@ var State = {

};

export default State;
export default IsActive;
2 changes: 1 addition & 1 deletion modules/index.js
Expand Up @@ -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';
Expand Down

0 comments on commit 85c699c

Please sign in to comment.