https://github.com/penx/as-nav-link
When you want to use a CSSinJS library that expects an active prop but you're using React Router 😢
https://github.com/penx/as-nav-link
Last synced: 3 months ago
JSON representation
When you want to use a CSSinJS library that expects an active prop but you're using React Router 😢
- Host: GitHub
- URL: https://github.com/penx/as-nav-link
- Owner: penx
- Created: 2018-10-19T13:43:27.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-23T15:05:27.000Z (about 7 years ago)
- Last Synced: 2025-02-01T16:48:26.297Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 403 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# asNavLink
React Router HOC that mimics NavLink functionality but just passes an active prop to child component.
(For background see https://github.com/UKHomeOffice/govuk-react/issues/423)
e.g. when you want to use a CSSinJS library that expects an active prop but you're using React Router 😢
## Usage
`npm install as-nav-link --save`
### Your Dumb Component
Say you have a dumb/UI/styled component, such as:
```jsx
const MyNavAnchor = styled(({
as: T = 'a',
...props
}) => )({
textDecoration: 'blink',
color: 'blue',
}, ({ active }) => (active && {
color: 'red',
}));
```
Note that you need to provide the 'as' prop. This is provided by styled-components by default but needs to be done manually (as per code sample above) for emotion.
### Higher order component
```jsx
import asNavLink from 'as-nav-link';
const MyNavLink = asNavLink(config)(MyNavAnchor);
```
`config` is optional and can include an `isActive` function (as per ReactRouter's NavLink) and an `activeProp` string (the prop name that is passed to your dumb component).
### Render Props
This HOC wraps a render props component. If you'd rather use render props directly, see [NavLinkWithProp](https://github.com/penx/nav-link-with-prop)