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. Walks through its children and replaces strings containing URLs 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

Read the full documentation.

Changelog

v3.0.0

BREAKING CHANGES

• React, jQuery and Element interfaces moved to dedicated packages at linkify-react,linkify-jquery and linkify-element respectively:
• Remove default class="linkified" from all discovered links. Opt back in by setting the className option:

  linkifyStr(str, { className: 'linkified' });
  

• Remove default target="_blank" attribute for discovered URLs. Opt back in by setting the target option:

  linkifyHtml(str, {
    target: (href, type) => type === 'url' && '_blank',
  });
  

• React component: Remove outer <span> tag wrapper in favour of tag-less React.Fragment for React >=16. To opt back-in, set tagName='span':

  <Linkify tagName="span">{content}</Linkify>
  

• AMD module interface is no longer provided. Use an ESM bundler instead.
• Plugins imported after linkify is called on a string for the first time will not longer work. Import all plugins before calling a linkify core or interface function.
• Custom plugin API is not compatible with previous API in Linkify v2
• Dropped support for Internet Explorer versions 9 and 10. IE11 is still supported
• Dropped support for React versions <15

Deprecations

• Use dedicated packages linkify-string and linkify-html instead of linkifyjs/string and linkifyjs/html. The embedded packages will be removed in v4.0
• Use dedicated plugin packages linkify-plugin-[PLUGIN] instead of linkifyjs/plugin/[PLUGIN]. The embedded packages will be removed in v4.0

All Changes

• Full Internationalized Domain (IDN) and Emoji domain support 🇺🇳🌍✈️🎉💃! Detect URLs, #hashtags and @mentions in any language

• ~10x faster startup; ~4x faster combined startup + first run

• Custom protocols with linkify.registerCustomProtocol('protocol')

• Modernized codebase and build system

• Add new rel option at top level as an alternate way of including it in attributes

• New and improved plugin API

• TypeScript definitions included in published packages

• linkify.find() output includes start and end indexes for where in the string a link was found

• Plugins no longer need to be called on linkify after import

  // Before
  import * as linkify from 'linkifyjs';
  import hashtag from 'linkifyjs/plugins/hashtag';
  hashtag(linkify);
  
  // After
  import * as linkify from 'linkifyjs';
  import 'linkifyjs/plugins/hashtag';