Jump To

• BREAKING CHANGES
  • Deprecations
• React.js Interface
• Mention and Ticket Plugins
• Better option definition
  • Specify options by link type
  • Redefine default options

What’s new in Linkify v2.1

Linkify 2.1 is here, and it includes a ton of new features and interface improvements. You can read the full CHANGELOG on GitHub.

BREAKING CHANGES

• The dist/jquery.linkify.js 1.x legacy browser files have been permanently removed from the release bundle.
  • Use linkify.js and linkify-jquery.js instead.
• The deprecated newLine option from linkify 1.x has been completely removed.
  • Use the nl2br option instead.

Deprecations

• The linkAttributes option is deprecated in favour of just attributes.
• The linkClass option is deprecated in favour of className.
• The default .linkified class is deprecated and will be fully removed in a future release.

To maintain compatibility with versions >= 2.1, make sure options objects include these properties instead of linkAttributes and linkClass

options = {
  attributes: {
    /* */
  }, // instead of `linkAttributes`
  className: "linkified", // instead of `linkClass`. Apply default linkClass
};

React.js Interface

Linkify now has native support for React.js, a popular component-based library for building user interfaces. To use it, wrap some text with the with the provided Linkify component. This will generate <a> elements for URLs, email addresses, mentions, or hashtags.

JSX

import React from 'react';
import ReactDOM from 'react-dom';

import * as linkify from 'linkifyjs';
import hashtag from 'linkifyjs/plugins/hashtag';
import Linkify from 'linkifyjs/react';

hashtag(linkify);

class Main extends React.Component {
  render() {
    let linkProps = {
      // Click handler for links
      onClick: () => confirm('Are you sure you want to leave this page?')
    };

    return <Linkify options={{attributes: linkProps}}>
      Check out my profile at github.com/nfrasser. It's #rad.
    </Linkify>;
  }
}

ReactDOM.render(<Main /> document.getElementById('container'));

This renders the following HTML

<div id="container">
  <span>
    Check out my profile at
    <a href="http://github.com/nfrasser" class="linkified" target="_blank">
      github.com/nfrasser </a
    >. It's <a href="#rad" class="linkified">#rad</a>.
  </span>
</div>

Check out the full interface documentation.

Mention and Ticket Plugins

Linkify (finally!) has first-class support for #tickets (think GitHub issue references) and @mentions.

const linkify = require("linkifyjs");
const linkifyStr = require("linkifyjs/string");

require("linkifyjs/plugins/mention")(linkify);
require("linkifyjs/plugins/ticket")(linkify);

let linkified = linkifyStr("Hey @mdo, check out issue #42!");
console.log(linkified);

This will output.

Hey <a href="/mdo" class="linkified">@mdo</a>,
check out issue <a href="#42" class="linkified">#42</a>!

Check out the mention and ticket plugin docs.

Better option definition

Different types of links like hashtags or mentions require very specific href attributes and other HTML formatting. Implementing these was cumbersome in previous versions of linkify. 2.1 includes an improved interface for specifying these options.

See the options documentation for details.

Specify options by link type

You can now specify man of linkify’s formatting options with objects where each key is a type of detectable link:

$("p").linkify({
  formatHref: {
    hashtag: (val) => "https://bsky.app/hashtag" + val.substr(1),
    mention: (val) => "/users" + val,
  },
  validate: {
    url: (val) => /^https?:\/\//.test(val), // only allow URLs that begin with a protocol
    email: false, // don't linkify emails
  },
});

Redefine default options

If you application calls linkify multiple times with the same options, you can now specify those options when your app loads, before calling linkify.

const linkify = require("linkifyjs");
linkify.options.defaults.defaultProtocol = "https";

// ...

const linkifyHtml = require("linkifyjs/html");
let result = linkifyHtml("//amazon.ca");
console.log(result); // https://amazon.ca

Check out the complete CHANGELOG on GitHub.