New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
asAnchor rethink #423
Comments
Proposal for supporting link typeFor any link-like component, that we want the peer project to be able to configure to use a React Router Link or NavLink, we provide an 'as' prop. This is baked in to styled-components but not emotion, so we will need to do this manually where needed for now. Anchor on its own would default to using a 'a' tag (or possibly a button in some circumstances?) export const MyAnchor = styled(({
as: T = 'a',
...props
}) => <T {...props}/>)({
textDecoration: 'blink',
// etc
}) This would allow a developer to: import MyAnchor from './my-anchor'
import { Link } from 'react-router'
const MyComponent = () => {
<MyAnchor /> //renders <a />
<MyAnchor as={Link} /> //renders a Link
} How to handle NavLink1. custom React Router compatible componentCreate a custom component based on NavLink for a peer application to use that passes down a true/false prop, whose name defaults to or 2. use withPropsThis example is for styled-components const activeClassName = 'active';
const StyledNavLink = styled(NavLink).attrs({
activeClassName: activeClassName,
})`
&.${activeClassName} {
color: blue;
}
` https://spectrum.chat/thread/8f753cea-75c3-4524-8207-fd0216026665 Equivalent in emotion should be possible with withProps https://github.com/emotion-js/emotion/blob/master/docs/with-props.md However we should support the peer application being able to supply either an active class name and an active prop. |
Proposed implementation: |
Proposed library for peer applications to use for compatibility with React Router NavLink: |
This is in place but needs to be done where we're currently using asAnchor |
Support for |
asAnchor was removed in #814 |
Reopening to review navlink with respect to |
The asAnchor HOC allows a parent application to style another component as an anchor.
This is so that the parent application can use react router and can pass in ReactRouter.Link to be styled, without introducing react-router as a dependency of govuk-react.
In turn this keeps govuk-react router agnostic, so that it could be used with reach-router etc.
This pattern is not scalable. We don't want to export loads of HOCs from the route of govuk-react, and if we did would have to come up with a unique name for each.
We also have an issue of how we deal with NavLink and it's active class that is not passed as a prop, how to pick this up with govuk-react while still being router agnostic.
This ticket is to track
(1) formalising a standard
(2) including the standard in the readme
(3) implementing it across govuk-react
The text was updated successfully, but these errors were encountered: