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>