react-linkifier
v3.1.0 react links anchor linkify url anchor conversor parser clickable and 2 more...
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 ormailto:
for emails
Live 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 missingrenderer
: pass a component to use a custom link renderer, defaults toa
.ignore
: list of elements to ignore (defaults to['a', 'button']
)- Rest of properties of the options object (eg:
style
,className
) or props of theLinkifier
component are passed as props to the link element
License
MIT
Credits
Artwork by emojione.com