Open penx opened 6 years ago
I created an issue that I hope describes the problem and possible solutions reasonably well: https://github.com/ReactTraining/react-router/issues/6390
How do other component libraries handle this?
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
There’s a list in our readme. I’m planning to review this afternoon
Cool, just for anyone else; https://github.com/UKHomeOffice/govuk-react#other-react-component-libraries
Summary of approaches
https://www.styled-components.com/docs/api#as-polymorphic-prop https://github.com/emotion-js/emotion/issues/837
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
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