Skip to main content

useLink

ts
import { useLink } from 'solito/link'
# or, for App Directory:
import { useLink } from 'solito/navigation'
ts
import { useLink } from 'solito/link'
# or, for App Directory:
import { useLink } from 'solito/navigation'

A low-level hook that lets you create your own accessible Link component.

This is inspired by useLinkProps from React Navigation.

Usage​

tsx
const linkProps = useLink({
href,
as,
shallow,
replace,
})
tsx
const linkProps = useLink({
href,
as,
shallow,
replace,
})

Arguments​

  • href: required The URL to link to. Either a string or Url object.
  • as: The URL to link to. Either a string or Url object.
  • shallow: boolean
  • replace: boolean

See the Next.js Link API for more details about these props.

Returns​

The hook returns the following values:

  • href: string
  • onPress: function
  • accessibiltyRole: string

You should spread these values directly onto your component:

tsx
const MyLink = ({ href, as, ...props }: Props) => {
const linkProps = useLink({
href,
as,
})
 
return <Pressable {...props} {...linkProps} />
}
tsx
const MyLink = ({ href, as, ...props }: Props) => {
const linkProps = useLink({
href,
as,
})
 
return <Pressable {...props} {...linkProps} />
}

Full Example​

Here is an example of useLink, together with MotiPressable from moti.

tsx
import { MotiPressableProps, MotiPressable } from 'moti/interactions'
import { useLink, UseLinkProps } from 'solito/link'
 
export type MotiLinkProps = UseLinkProps &
Omit<
MotiPressableProps,
// ignore props that will be overridden by useLink
keyof UseLinkProps | keyof ReturnType<typeof useLink>
>
 
export const MotiLink = (props: MotiLinkProps) => {
const linkProps = useLink(props)
 
return <MotiPressable {...props} {...linkProps} />
}
tsx
import { MotiPressableProps, MotiPressable } from 'moti/interactions'
import { useLink, UseLinkProps } from 'solito/link'
 
export type MotiLinkProps = UseLinkProps &
Omit<
MotiPressableProps,
// ignore props that will be overridden by useLink
keyof UseLinkProps | keyof ReturnType<typeof useLink>
>
 
export const MotiLink = (props: MotiLinkProps) => {
const linkProps = useLink(props)
 
return <MotiPressable {...props} {...linkProps} />
}

This code snippet is the source code for Solito's Moti integration 🤯

You can now use MotiLink as if it were MotiPressable, along with the props for our link:

tsx
<MotiLink
animate={({ pressed }) => {
'worklet'
return {
scale: pressed ? 0.9 : 1,
}
}}
href="/artists/drake"
as="/@drake"
>
<Text>Drake</Text>
</MotiLink>
tsx
<MotiLink
animate={({ pressed }) => {
'worklet'
return {
scale: pressed ? 0.9 : 1,
}
}}
href="/artists/drake"
as="/@drake"
>
<Text>Drake</Text>
</MotiLink>