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

$3

As React component
`javascript
import Linkify from 'react-simple-linkify';
`

As function

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

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

Linkifying

`javascript

Some useful description: https://github.com/yurkagon/react-simple-linkify.

That is an youtube video:
https://www.youtube.com/watch?v=9NSzl8DtdM4

`

or

`javascript
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:

`javascript
Some useful description: https://github.com/yurkagon/react-simple-linkify.

That is an youtube video:
https://www.youtube.com/watch?v=9NSzl8DtdM4
`

$3

Let's write some url enhancer:
`javascript
const UrlEnhancer = (props) => {
const { url } = props;

if (isYouTubeUrl(url)) {
return (

);
}

return (

{url}

);
}
`

And let's use it:
`javascript

Some useful description: https://github.com/yurkagon/react-simple-linkify.

That is an youtube video:
https://www.youtube.com/watch?v=9NSzl8DtdM4

`

or

`javascript
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:

`javascript
Some useful description: https://github.com/yurkagon/react-simple-linkify.

That is an youtube video:
{/ shallow render of mocked component /}

`




Prop types

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