This page is outdated

You are reading documentation for Linkify v2. Browse the latest v3+ documentation.

Jump To

Linkify React Component Interface

linkify-react provides a React component that walks through its children and replaces strings containing URLs with strings and <a> elements.



npm install linkifyjs
const Linkify = require('linkifyjs/react');

or with ES6 modules

import Linkify from 'linkifyjs/react';


<script src="linkify.amd.js"></script>
<script src="linkify-react.amd.js"></script>
  require(['linkify-react'], function (Linkify) {
    // …

Browser globals

<script src="linkify.js"></script>
<script src="linkify-react.js"></script>



// render()
var options = {/* … */};
var content = 'For help with, please email';
return <Linkify tagName="p" options={options}>{content}</Linkify>;

This will render the following HTML into the outer element

'<p>For help with <a href="" target="_blank"></a>, please email <a href=""></a></p>'


  • String tagName The HTML tag to use for the outermost element ('span' by default)
  • Object [options] Options object


You can add events handlers to the discovered links by specifying them in the options.attributes object. Define event listeners in the same way you would for a regular React element:

let linkProps = {
  onClick: (event) => {
    if (!confirm('Are you sure you want to leave this page?')) {
return <Linkify options={{attributes: linkProps}}>