react-simple-linkify

A simple React library for parsing text with urls to make them clickable or customized via React components

Installation

yarn react-simple-linkify

or

npm install react-simple-linkify

Usage

Importing

As React component

import Linkify from 'react-simple-linkify';

As function

import { linkify } from 'react-simple-linkify';

Using as React component is a better way because Linkify component is memoized.

Linkifying

<Linkify>
    Some useful description: https://github.com/yurkagon/react-simple-linkify.
    
    That is an youtube video:
    https://www.youtube.com/watch?v=9NSzl8DtdM4
</Linkify>

or

linkify(`
    Some useful description: https://github.com/yurkagon/react-simple-linkify.
    
    That is an youtube video:
    https://www.youtube.com/watch?v=9NSzl8DtdM4
`);

Renders to:

Some useful description: <a href="https://github.com/yurkagon/react-simple-linkify">https://github.com/yurkagon/react-simple-linkify</a>.

That is an youtube video:
<a href="https://www.youtube.com/watch?v=9NSzl8DtdM4">https://www.youtube.com/watch?v=9NSzl8DtdM4</a>

Using custom React components

Let's write some url enhancer:

const UrlEnhancer = (props) => {
    const { url } = props;
    
    if (isYouTubeUrl(url)) {
        return (
            <YouTubePlayer url={url} />
        );
    }
    
    return (
        <a href={url} rel="noopener noreferrer" target="_blank">
            {url}
        </a>
    );
}

And let's use it:

<Linkify component={UrlEnhancer}>
    Some useful description: https://github.com/yurkagon/react-simple-linkify.
    
    That is an youtube video:
    https://www.youtube.com/watch?v=9NSzl8DtdM4
</Linkify>

or

linkify(`
    Some useful description: https://github.com/yurkagon/react-simple-linkify.
    
    That is an youtube video:
    https://www.youtube.com/watch?v=9NSzl8DtdM4
`, UrlEnhancer);

Renders to:

Some useful description: <a href="https://github.com/yurkagon/react-simple-linkify" rel="noopener noreferrer" target="_blank">https://github.com/yurkagon/react-simple-linkify</a>.

That is an youtube video:
{/* shallow render of mocked component */}
<YouTubePlayer url="https://www.youtube.com/watch?v=9NSzl8DtdM4" />

Prop types

Linkify.propTypes = {
  children: PropTypes.string.isRequired,
  component: PropTypes.func
};