Provide an ActiveStore-ish mixin

[rexxars]

This is a little silly, but I'm basically trying to wrap <Link> in an <li> and have the active-class be applied to the li instead of the link (see https://twitter.com/ryanflorence/status/482334466375819265)

I got this working by basically duplicating most of Link, but referencing an internal component (react-nested-router/modules/stores/ActiveStore) seems a little hacky and is prone to break in the future.

Preferably, I'd like to see some sort of mixin that you can include in your components to easily check if a route is active. An alternative would be to expose ActiveStore on the router if it's there to stay.

Thoughts?

[ryanflorence]

Bootstrap has always been wrong to do this.

I like the mixin idea though.

Sent from my iPhone

On Jul 17, 2014, at 2:45 AM, Espen Hovlandsdal [email protected] wrote:

This is a little silly, but I'm basically trying to wrap in an

and have the active-class be applied to the li instead of the link (see https://twitter.com/ryanflorence/status/482334466375819265)

I got this working by basically duplicating most of Link, but referencing an internal component (react-nested-router/modules/stores/ActiveStore) seems a little hacky and is prone to break in the future.

Preferably, I'd like to see some sort of mixin that you can include in your components to easily check if a route is active. An alternative would be to expose ActiveStore on the router if it's there to stay.

Thoughts?

—
Reply to this email directly or view it on GitHub.

[ryanflorence]

Something really low level like:

var SomeWellNamedMixin = require('react-nested-router').SomeWellNamedMixin;

var ListLink = React.createClass({
  mixins: [SomeWellNamedMixin]
  render: function() {
    return (
      <li className={this.props.isActive ? 'active' : 'inactive'}>
        <Link to={this.props.route}>{this.props.children}</Link>
      </li>;
  }
});

var link = <ListLink route="about">About</ListLink>;

All it would do is take this.props.route and this.props.params and tell you if the route you care about is active, then anybody can make their own abstractions on top for bootstrap, etc.

[rexxars]

Wow, great work. Quickly delivered! Thanks a ton!

[ryanflorence]

I have a feeling michael is or anticipates using bootstrap somewhere ...

On Thu, Jul 17, 2014 at 1:05 PM, Espen Hovlandsdal <[email protected]

wrote:

Wow, great work. Quickly delivered! Thanks a ton!

—
Reply to this email directly or view it on GitHub
#85 (comment)
.

[mjackson]

Haha, nope :) After being forced to use Bootstrap on stuff while working for Twitter, I'm quite happy to leave it alone these days.