Skip to content

Commit

Permalink
Update React router and add Next.js docs (#2627)
Browse files Browse the repository at this point in the history
  • Loading branch information
broccolinisoup committed Dec 1, 2022
1 parent a04f781 commit fa43979
Showing 1 changed file with 49 additions and 8 deletions.
57 changes: 49 additions & 8 deletions docs/content/drafts/UnderlineNav2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -104,20 +104,61 @@ render(<Navigation />)
### With React Router

```jsx
import {Link} from 'react-router-dom'
import {Link, useMatch, useResolvedPath} from 'react-router-dom'
import {UnderlineNav} from '@primer/react/drafts'

function UnderlineNavItem({to, children, ...rest}) {
const resolved = useResolvedPath(to)
const isCurrent = useMatch({path: resolved.pathname, end: true})
return (
<UnderlineNav.Item as={Link} to={to} aria-current={isCurrent ? 'page' : undefined} {...rest}>
{children}
</UnderlineNav.Item>
)
}

const Navigation = () => {
return (
<UnderlineNav aria-label="Repository">
<UnderlineNavItem to="/code" counter={4}>
Code
</UnderlineNavItem>
<UnderlineNavItem to="/issues" counter={44}>
Issues
</UnderlineNavItem>
<UnderlineNavItem to="/pulls">Pull Requests</UnderlineNavItem>
</UnderlineNav>
)
}
```

### With Next.js

```jsx
import {useRouter} from 'next/router'
import Link from 'next/link'
import {UnderlineNav} from '@primer/react/drafts'

function UnderlineNavItem({href, children, ...rest}) {
const router = useRouter()
const isCurrent = typeof href === 'string' ? router.asPath === href : router.pathname === href.pathname
return (
<UnderlineNav.Item s={Link} href={href} aria-current={isCurrent ? 'page' : undefined} {...rest}>
{children}
</UnderlineNav.Item>
)
}

const Navigation = () => {
return (
<UnderlineNav aria-label="Repository">
<UnderlineNav.Item as={Link} to="code" counter={4} aria-current="page">
<UnderlineNavItem href="/code" counter={4}>
Code
</UnderlineNav.Item>
<UnderlineNav.Item counter={44} as={Link} to="issues">
</UnderlineNavItem>
<UnderlineNavItem href="/issues" counter={44}>
Issues
</UnderlineNav.Item>
<UnderlineNav.Item as={Link} to="pulls">
Pull Requests
</UnderlineNav.Item>
</UnderlineNavItem>
<UnderlineNavItem href="/pulls">Pull Requests</UnderlineNavItem>
</UnderlineNav>
)
}
Expand Down

0 comments on commit fa43979

Please sign in to comment.