linkify-react

What is linkify-react?

The linkify-react npm package is a React component for converting plain text containing URLs, email addresses, and hashtags into clickable links. It is useful for dynamically rendering user-generated content where such elements need to be identified and converted into interactive links.

What are linkify-react's main functionalities?

Convert URLs to clickable links

This feature allows you to convert plain text URLs into clickable links. The `defaultProtocol` option ensures that URLs without a specified protocol are treated as HTTPS links.

import React from 'react';
import Linkify from 'linkify-react';

const options = {
  defaultProtocol: 'https'
};

const text = 'Check out this website: www.example.com';

const App = () => (
  <Linkify options={options}>{text}</Linkify>
);

export default App;

Convert email addresses to mailto links

This feature converts plain text email addresses into clickable mailto links, making it easy for users to send emails directly from the rendered content.

import React from 'react';
import Linkify from 'linkify-react';

const text = 'Contact us at [e-mail]';

const App = () => (
  <Linkify>{text}</Linkify>
);

export default App;

Convert hashtags to clickable links

This feature converts hashtags into clickable links. The `formatHref` option allows you to customize the URL format for hashtags, such as linking to a Twitter search for the hashtag.

import React from 'react';
import Linkify from 'linkify-react';

const options = {
  formatHref: (href, type) => {
    if (type === 'hashtag') {
      return 'https://twitter.com/hashtag/' + href.substring(1);
    }
    return href;
  }
};

const text = 'Follow the conversation at #example';

const App = () => (
  <Linkify options={options}>{text}</Linkify>
);

export default App;

Other packages similar to linkify-react

react-linkify

react-linkify is a similar package that also converts URLs, email addresses, and hashtags in plain text into clickable links. It is simpler and more lightweight compared to linkify-react, but it may lack some of the advanced customization options available in linkify-react.

react-autolinker

react-autolinker is another package that provides similar functionality by converting URLs, email addresses, and phone numbers into clickable links. It uses the Autolinker.js library under the hood and offers a range of customization options. It is comparable to linkify-react in terms of features and flexibility.

README

linkify-react

Linkify React component. Use it to find URLs, email addresses and more in child strings and replace them with strings and <a> elements.

Installation

Install from the command line with NPM

npm install linkifyjs linkify-react

Import into your JavaScript with require

const Linkify = require('linkify-react');

or with ES modules

import Linkify from 'linkify-react';

Usage

const contents = 'helloworld.com';

<Linkify options={...}>
  {contents}
</Linkify>

Read the full documentation.

License

MIT

Changelog

v4.2.0

• Correctly sanitize object replacement character by treating as whitespace
• Avoid detecting invalid URLs with numbers around boundaries
• Prevent delimiter apostrophes from being included in URLs
• Correctly interpret \r\n as newline character
• Correctly interpret emoji followed by # sign
• Fix support for domain names with multiple hyphens
• Fix parsing for magnet links