Chakra-UI x React-linkify.md

Tiny wrapper component for [React-linkify](https://github.com/tasti/react-linkify to stylistically fit with Chakra-UI.

npm install --save react-linkify
npm install --save-dev @types/react-linkify

Instead of using the <Linkify> component provided by React-linkify, import the custom wrapper provided below.

import { Linkify } from '@components/linkify/linkify';

...

<Linkify>...</Linkify>

Adapted from this comment.

linkify.tsx

import { Link } from '@chakra-ui/core';
import React from 'react';
import ReactLinkify from 'react-linkify';

// This function creates the desired Link components, based on the Chakra-UI `Link`
// Customize as needed!
const componentDecorator = (href, text, key) => (
  <Link href={href} key={key} isExternal={true}>
    {text}
  </Link>
);

export const Linkify = (props) => {
  return <ReactLinkify {...props} componentDecorator={componentDecorator} />;
};