When we use react linkify directly with chakra-ui (eg.Text) components, we cannot handle the link.
Problematic use case
import Linkify from 'react-linkify';
import {Box, Text} from '@chakra-ui/react';
export default function Usage(){
return (
<Linkify>
<Text>https://stackoverflow.com</Text>
</Linkify>
);
};
Solution is;
Create Linkify.js
Linkify.js file:
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} />; };
Import new Linkify Component to the file.
Usage
import { Linkify } from './Linkify';
import { Text } from '@chakra-ui/react';
export default function Usage(){
return(
<Linkify>
<Text>https://stackoverflow.com</Text>
</Linkify>
)
}
Problem Solved! Thanks...