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 astring
orUrl
object.as
: The URL to link to. Either astring
orUrl
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
constMyLink = ({href ,as , ...props }:Props ) => {constlinkProps =useLink ({href ,as ,})Âreturn <Pressable {...props } {...linkProps } />}
tsx
constMyLink = ({href ,as , ...props }:Props ) => {constlinkProps =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 typeMotiLinkProps =UseLinkProps &Omit <MotiPressableProps ,// ignore props that will be overridden by useLinkkeyofUseLinkProps | keyofReturnType <typeofuseLink >>Âexport constMotiLink = (props :MotiLinkProps ) => {constlinkProps =useLink (props )Âreturn <MotiPressable {...props } {...linkProps } />}
tsx
import {MotiPressableProps ,MotiPressable } from 'moti/interactions'import {useLink ,UseLinkProps } from 'solito/link'Âexport typeMotiLinkProps =UseLinkProps &Omit <MotiPressableProps ,// ignore props that will be overridden by useLinkkeyofUseLinkProps | keyofReturnType <typeofuseLink >>Âexport constMotiLink = (props :MotiLinkProps ) => {constlinkProps =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
<MotiLinkanimate={({ pressed }) => {'worklet'return {scale: pressed ? 0.9 : 1,}}}href="/artists/drake"as="/@drake"><Text>Drake</Text></MotiLink>
tsx
<MotiLinkanimate={({ pressed }) => {'worklet'return {scale: pressed ? 0.9 : 1,}}}href="/artists/drake"as="/@drake"><Text>Drake</Text></MotiLink>