react-linkifier

Tiny React library to create links from text

Features

• Very small (~2KB minified and gzipped)
• Zero external dependencies
• Use it as function or component
• Works great with complex URLs and handles many corner cases
• Allows custom props to be applied to <a> elements
• Automatically prepends http:// to the href or mailto: for emails

Live demo

Demo

Install

npm install --save react-linkifier

Basic usage

As component

import Linkifier from 'react-linkifier';
 
const MyComponent = () => (
    <Linkifier>
        <div>check this: www.example.org</div>
    </Linkifier>
);
 
// Render result:
// <div>
//     <span>check this: </span><a href="http://www.example.org">www.example.org</a>
// </div>

As function

import {linkifier} from 'react-linkifier';
 
const MyComponent = () => (
    <div>
        {linkifier('www.example.org')}
    </div>
);
 
// Render result:
// <div>
//     <a href=\"http://www.example.org\">www.example.org</a>
// </div>

Advanced usage

As component

className and other props are assigned to the link elements.

import Linkifier from 'react-linkifier';
 
const MyComponent = () => (
    <Linkifier target="_blank" className="my-class">
        <div>www.example.org</div>
    </Linkifier>
);
 
// Render result:
// <div>
//     <a target=\"_blank\" class=\"my-class\" href=\"http://www.example.org\">www.example.org</a>
// </div>

With custom renderer

If you want to change the way <Linkifier /> renders links, for example when you want to use a custom component instead of <a>, you can use the renderer prop:

import Linkifier from 'react-linkifier';
 
const RedLink = ({href, children}) => (
    <a href={href} style={{color: 'red'}}>
        {children}
    </a>
);
 
const MyComponent = () => (
    <Linkifier renderer={RedLink}>
        <div>www.example.org</div>
    </Linkifier>
);
 
// Render result:
// <div>
//     <a href=\"http://www.example.org\" style=\"color:red;\">www.example.org</a>
// </div>

Ignore elements

Use the ignore prop to skip some children. By default ignores a and button

const ignore = [...Linkifier.DEFAULT_IGNORED, 'pre'];
 
const MyComponent = () => (
    <Linkifier ignore={ignore}>
        <pre>
            http://example.org
        </pre>
        <a href="http://example.org">example</a>
        <button>http://example.org</button>
    </Linkifier>
);
 
// None of these urls will be linkified

As function

import {linkifier} from 'react-linkifier';
 
const text = 'check this: www.example.org';
 
const MyComponent = () => (
    <div>
        {linkifier(text, {target: '_blank', className: 'link'})}
    </div>
);
 
// Render result:
// <div>
//     <span>check this: </span>
//     <a target="_blank" class="link" href="http://www.example.org">www.example.org</a>
// </div>

With custom renderer

When using linkifier as a function you can also pass a custom renderer:

import {linkifier} from 'react-linkifier';
 
const RedLink = ({href, children}) => (
    <a href={href} style={{color: 'red'}}>
        {children}
    </a>
);
 
const text = 'check this: www.example.org';
 
const MyComponent = () => (
    <div>
        {linkifier(text, {renderer: RedLink})}
    </div>
);
 
// Render result:
// <div>
//     <span>check this: </span>
//     <a href="http://www.example.org" style="color:red;">www.example.org</a>
// </div>

Options

• protocol: this protocol will be used if the protocol part is missing
• renderer: pass a component to use a custom link renderer, defaults to a.
• ignore: list of elements to ignore (defaults to ['a', 'button'])
• Rest of properties of the options object (eg: style, className) or props of the Linkifier component are passed as props to the link element

License

MIT

Credits

Artwork by emojione.com