Navlink to have an 'active' prop to support styling that is agnostic of RR

[Loque-]

Hi all, thank you for your time, I think I have an interesting/useful feature request;

The request is to provide a property on NavLink, that allows CSS-in-JS libraries to style the component, based on the bool value of this property, perhaps it could be called active.

I appreciate there are solutions which are satisfactory for styling active NavLinks that support CSS-in-JS libs already using activeClassName, and, if I was building the React component in a 'normal' project, I would have no problem implementing this solution, however, this request has come through building components as part of a component library, that should be React Router agnostic, as it reduces dependencies and other obvious reasons.

In order to make the the component library agnostic of any router library, we use the HOC pattern, like so;

import React from 'react';
import styled from 'react-emotion';

const asAnchor = (AnchorType) => {
  const Anchor = props => (
    <AnchorType {...props}>{props.children}</AnchorType>
  );

  const StyledHoc = styled(Anchor)({
    color: 'blue',
    ':hover': {
      color: 'red',
    },
  }
));

  return StyledHoc;
};

export default asAnchor;

Implemented, with a solution that is specific to RR, it would look like;

import React from 'react';
import styled from 'react-emotion';

const asAnchor = (AnchorType) => {
  const Anchor = props => (
    <AnchorType activeClassName="active" {...props}>{props.children}</AnchorType>
  );

  const StyledHoc = styled(Anchor)({
    color: 'blue',
    ':hover': {
      color: 'red',
    },
    '&.active': {
      color: 'hotpink',
    },
  }
));

  return StyledHoc;
};

export default asAnchor;

What, I guess, I was hoping for, and expecting, was that NavLink would have some type of active prop on it, that would allow for this instead;

import React from 'react';
import styled from 'react-emotion';

const asAnchor = (AnchorType) => {
  const Anchor = props => (
    <AnchorType {...props}>{props.children}</AnchorType>
  );

  const StyledHoc = styled(Anchor)({
    ':hover': {
      color: 'red',
    },
  }, ({ active }) => ({
    color: active ? 'blue' : 'hotpink',
  }
));

  return StyledHoc;
};

export default asAnchor;

I created a small codesandbox that illustrates some of this;

https://codesandbox.io/s/2333oy601y

Do you have any thoughts/ideas on this? Maybe I missed something? I have posted in the Discord channel also and have mentioned it in the Emotion JS Slack channel to see if anyone else has some input.

Thanks so much for your time reading this.

[penx]

Some background on the issue

govuk-react/govuk-react#423

And our current proposed solution

https://github.com/penx/as-nav-link

[chaance]

I know this is a bit old at this point, so I'm sorry no one responded here sooner. I don't suspect we'll add a prop specifically for targeting Emotion's prop-based styling API, but my recommendation would be to use a selector based on the aria-current attribute, which is not React Router specific but should generally be used on active links anywhere.

const StyledNavLink = styled(NavLink)({
  padding: "5px",
  color: "blue",
  '&[aria-current="page"]': {
    color: "crimson"
  }
});

https://codesandbox.io/s/eager-hawking-l80qm?file=/src/App.js:168-301