Link: Make active class configurable

[ryanflorence]

Link.activeClassName = "somethingElse"

and

<Link activeClassName="somethingElse"/>

[sophiebits]

Link.activeClassName sounds like a bad idea to me personally because it means that if you have a third-party component that has its own styles and uses react-nested-router then you could break it by changing this global config, which seems undesirable. If you want to change activeClassName everywhere in your app then you could make a MyLink wrapper around it that specifies activeClassName and passes the other props down verbatim (and use that everywhere instead of Link).

[mjackson]

Agree with @spicyj. It's situations like these that transferPropsTo was made for.

var CustomLink = React.createClass({
  getDefaultProps: function () {
    return { activeClassName: 'custom-active-classname' };
  },
  render: function () {
    return this.transferPropsTo(
      <Link>{this.props.children}</Link>
    );
  }
});

[ryanflorence]

just looked at our code and didn't realize we had that as a default prop, fantastic.

[christianvuerings]

@mjackson @ryanflorence It looks like transferPropsTo has been removed from React, any suggestions on how to do this in a different way?

Found some good docs at https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7 but wasn't able to make the example (overwriting activeClassName for CustomLink) work yet.

[sophiebits]

This is equivalent to what @mjackson said:

var CustomLink = React.createClass({
  getDefaultProps: function () {
    return { activeClassName: 'custom-active-classname' };
  },
  render: function () {
    return <Link {...this.props}>{this.props.children}</Link>;
  }
});

If you want activeClassName to override what was passed in, do:

var CustomLink = React.createClass({
  render: function () {
    return (
      <Link {...this.props} activeClassName="custom-active-classname">
        {this.props.children}
      </Link>
    );
  }
});

[christianvuerings]

@spicyj Thanks, that works beautifully!