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](https://runkit.com/pladaria/react-linkifier-demo) ## Install ```javascript npm install --save react-linkifier ``` ## Basic usage ### As component ```javascript import Linkifier from 'react-linkifier'; const MyComponent = () => (
check this: www.example.org
 ); // Render result: //
// check this: www.example.org //
``` ### As function ```javascript import {linkifier} from 'react-linkifier'; const MyComponent = () => (
{linkifier('www.example.org')}
); // Render result: //
// www.example.org //
``` ## Advanced usage ### As component `className` and other props are assigned to the link elements. ```javascript import Linkifier from 'react-linkifier'; const MyComponent = () => (
www.example.org
 ); // Render result: //
// www.example.org //
``` #### With custom renderer If you want to change the way `` renders links, for example when you want to use a custom component instead of ``, you can use the `renderer` prop: ```javascript import Linkifier from 'react-linkifier'; const RedLink = ({href, children}) => ( {children} ); const MyComponent = () => (
www.example.org
 ); // Render result: //
// www.example.org //
``` #### Ignore elements Use the `ignore` prop to skip some children. By default ignores `a` and `button` ```javascript const ignore = [...Linkifier.DEFAULT_IGNORED, 'pre']; const MyComponent = () => ( 
            http://example.org
example ); // None of these urls will be linkified ``` ### As function ```javascript import {linkifier} from 'react-linkifier'; const text = 'check this: www.example.org'; const MyComponent = () => (
{linkifier(text, {target: '_blank', className: 'link'})}
); // Render result: //
// check this: // www.example.org //
``` #### With custom renderer When using ``linkifier`` as a function you can also pass a custom renderer: ```javascript import {linkifier} from 'react-linkifier'; const RedLink = ({href, children}) => ( {children} ); const text = 'check this: www.example.org'; const MyComponent = () => (
{linkifier(text, {renderer: RedLink})}
); // Render result: //
// check this: // www.example.org //
``` ## 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](emojione.com)