Skip to content

Commit

Permalink
docs(router): fix MUI button in "custom links" guide (#2420)
Browse files Browse the repository at this point in the history
  • Loading branch information
chorobin authored Sep 26, 2024
1 parent a2373db commit 61cd473
Showing 1 changed file with 20 additions and 15 deletions.
35 changes: 20 additions & 15 deletions docs/framework/react/guide/custom-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ While repeating yourself can be fine in many cases, you may find yourself repeat
If you want to create a component which wraps `Link` with some additional styles or behavior then you can do so with the following

```tsx
import * as React from 'react'
import { Link, createLink } from '@tanstack/react-router'

export const NavigationLink = createLink(
React.forwardRef((props: {}, ref: React.Ref<HTMLAnchorElement>) => {
React.forwardRef((props: {}, ref: React.ForwardedRef<HTMLAnchorElement>) => {
return (
<Link
{...props}
Expand Down Expand Up @@ -46,15 +47,13 @@ You can then use your newly created `Link` component as any other `Link`
You might want to use third party component libraries with TanStack Router. For example to use `Button` from MUI you can use `createLink` which infers the types from both `Button` and `Link` while keeping type parameters necessary for TanStack Router's type safety

```tsx
import { createLink, Link } from '@tanstack/react-router'
import { Button } from '@mui/material'
import * as React from 'react'
import { createLink, Link, CreateLinkProps } from '@tanstack/react-router'
import { Button, ButtonProps } from '@mui/material'

const ButtonLink = createLink(
React.forwardRef(
(
props: Parameters<typeof Button>[0],
ref: React.Ref<HTMLButtonElement>,
) => {
(props: ButtonProps<'a'>, ref: React.ForwardedRef<HTMLAnchorElement>) => {
return <Button {...props} ref={ref} component={Link} />
},
),
Expand All @@ -72,16 +71,22 @@ const ButtonLink = createLink(
If using props from `Link` like `to` is needed, you can use `CreateLinkProps`

```tsx
import * as React from 'react'
import { createLink, Link, CreateLinkProps } from '@tanstack/react-router'
import { Button } from '@mui/material'
import { Button, ButtonProps } from '@mui/material'

const ButtonLink = createLink(
React.forwardRef((props: CreateLinkProps & Parameters<typeof Button>[0]) => {
return (
<Button {...props} component={Link}>
Navigate to {props.to}
</Button>
)
}),
React.forwardRef(
(
props: CreateLinkProps & ButtonProps<'a'>,
ref: React.ForwardedRef<HTMLAnchorElement>,
) => {
return (
<Button {...props} ref={ref} component={Link}>
Navigate to {props.to}
</Button>
)
},
),
)
```

0 comments on commit 61cd473

Please sign in to comment.