Cuando usamos reaccionar vincular directamente con componentes de chakra-ui (por ejemplo, texto), no podemos manejar el enlace.
Caso de uso problemático
import Linkify from 'react-linkify'; import {Box, Text} from '@chakra-ui/react'; export default function Usage(){ return ( <Linkify> <Text>https://stackoverflow.com</Text> </Linkify> ); };La solución es;
Crear Linkify.js
Archivo Linkify.js:
import { Link } from '@chakra-ui/react'; import ReactLinkify from 'react-linkify'; const componentDecorator = (href, text, key) => ( <Link href={href} key={key} isExternal={true} color="blue.500" _focus={{ outline: 'none' }} > {text} </Link> ); export const Linkify = (props) => { return <ReactLinkify {...props} componentDecorator={componentDecorator} />; };Importe el nuevo componente Linkify al archivo.
Uso
import { Linkify } from './Linkify'; import { Text } from '@chakra-ui/react'; export default function Usage(){ return( <Linkify> <Text>https://stackoverflow.com</Text> </Linkify> ) }¡Problema resuelto! Gracias...