Jump To

• Installation
  • Node.js/Browserify
  • AMD
  • Browser globals
• Usage
  • Properties
  • Events

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.

Installation

Node.js/Browserify

npm install linkifyjs

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

or with ES6 modules

import Linkify from 'linkifyjs/react';

AMD

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

Browser globals

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

Usage

JSX

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

This will render the following HTML into the outer element

'<p>For help with <a href="http://github.com" target="_blank">GitHub.com</a>, please email <a href="mailto:support@github.com">support@github.com</a></p>'

Properties

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

Events

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?')) {
       event.preventDefault()
    }
  }
};
return <Linkify options={{attributes: linkProps}}>
  ...
</Linkify>;