Jump To

• Installation
  • Node.js module
  • Browser globals
• Usage

Linkify @Mention Plugin

Adds basic support for Twitter- and GitHub- style “at”-mentions.

Installation

Node.js module

Install from the command line with NPM

npm install linkifyjs linkify-plugin-mention

const linkify = require("linkifyjs");
require("linkify-plugin-mention");

or with ES6 modules

import * as linkify from "linkifyjs";
import "linkify-plugin-mention";

Browser globals

Download linkify and extract the contents into your website’s assets directory. Include the following scripts in your HTML:

<script src="linkify.js"></script>
<script src="linkify-plugin-mention.js"></script>

Usage

With @-mentions enabled, strings such as @username are replaced with <a href="/username">@username</a>. If this formatting works for your website, no additional options are required.

If you have different username path requirements, use the formatHref option with your preferred interface to correctly resolve a mention. Example linking to a user account on a website where accounts are located at https://example.com/profiles/<username>

const options = {
  formatHref: {
    mention: (href) => "https://example.com/profiles" + href,
  },
};

// With linkify-html
linkifyHtml("Check out @Hypercontext and @nfrasser", options);

// With linkify-react
<Linkify options={options}>Check out @Hypercontext and @nfrasser</Linkify>

The last line returns the following string:

'Check out <a href="https://example.com/profiles/Hypercontext">@Hypercontext</a> and <a href="https://example.com/profiles/nfrasser">@nfrasser</a>';