Show how active nav item would be specified and displayed with react router

[penx]

Please support how an active nav item would be specified and displayed.

Possibly not a contender for context api as we'd probably expect something further up to be managing the routing and telling us what is active. But worth a thought.

Copied from https://github.com/stevesims/govuk-frederic/pull/93#issuecomment-428522300

[Loque-]

I created an issue that I hope describes the problem and possible solutions reasonably well: https://github.com/ReactTraining/react-router/issues/6390

[penx]

How do other component libraries handle this?

[Loque-]

Good question, my current answer is no idea - if there are any you can think of off the top of your head spam me here/in slack and I'll have a look. Otherwise I'll try find some to look at.

edit: adequately named link; https://blog.bitsrc.io/11-react-component-libraries-you-should-know-178eb1dd6aa4

[penx]

There’s a list in our readme. I’m planning to review this afternoon

[Loque-]

Cool, just for anyone else; https://github.com/UKHomeOffice/govuk-react#other-react-component-libraries

[penx]

Summary of approaches

Approaches

as prop

https://www.styled-components.com/docs/api#as-polymorphic-prop https://github.com/emotion-js/emotion/issues/837

Libs

Rebass

Uses an "as" prop

export const Link = styled(Box)(
  themed('Link')
)

Link.defaultProps = {
  as: 'a',
  color: 'blue'
}

https://github.com/rebassjs/rebass/blob/master/src/index.js#L101-L108