react-linkify-it

react-linkify-it 🔗

A tiny universal linking solution that turns any pattern in your text clickable (aka linkify).

react-linkify-it comes with a set of prebuilt components for specific linking needs and a generic component to wrap any pattern with a component.

Prebuilt components for linking:

• URLs
• Jira Tickets
• Twitter usernames
• Emails

You can also use the generic component which lets you support your own use case as desired:

• Link GitHub Issues
• Link tags to any social media
• Link email addresses
• Link phone numbers
• Link any pattern you want!
• Wrap any pattern with a component!

Features

• 📦 Tiny - Less than 800 bytes gzipped after tree shaking.
• 🔹 Dependency free - No extra dependencies. Just a single file.
• 📝 Customizable - Adjust to your specific case as required.
• 💧 Generic - Not just links, wrap any pattern with any component.
• 🏎 Fast - Single pass processing.
• 🦺 Safe - Sanitized urls to prevent any XSS attacks.
• 🌐 i18n - Works with urls that contain international characters.
• ⚔ Tested - Thoroughly.
• 🕸 React support - Works with react v16.2+

Notes

• react-linkify-it provides a modern bundle for actively maintained browsers and a larger legacy bundle for older browsers.
  Read about how to utilize them.

Demo

Code Sandbox

Installation

npm i react-linkify-it

Usage - Prebuilt Components

Every prebuilt component also optionally accepts a className to attach to the link wrapper

1. Urls

import { LinkItUrl } from 'react-linkify-it';

const App = () => (
  <div className="App">
    <LinkItUrl>
      <p>"add some link https://www.google.com here"</p>
    </LinkItUrl>
  </div>
);

2. Jira Tickets

import { LinkItJira } from 'react-linkify-it';

const App = () => (
  <div className="App">
    <LinkItJira domain="https://projectid.atlassian.net">
      hello AMM-123 ticket
    </LinkItJira>
  </div>
);

3. Twitter handles

import { LinkItTwitter } from 'react-linkify-it';

const App = () => (
  <div className="App">
    <LinkItTwitter>
      hello @anantoghosh twitter
    </LinkItTwitter>
  </div>
);

4. Emails

import { LinkItEmail } from 'react-linkify-it';

const App = () => (
  <div className="App">
    <LinkItEmail>
      hello [e-mail] email
    </LinkItEmail>
  </div>
);

Usage - Generic Component

import { LinkIt } from 'react-linkify-it';

const regexToMatch = /@([\w_]+)/;

const App = () => (
  <div className="App">
    <LinkIt
      {/* Component to wrap each match with */}
      component={(match, key) => <a href={match} key={key}>{match}</a>}
      regex={regexToMatch}
    >
      www.google.com<div>hi @anantoghosh</div>
    </LinkIt>
  </div>
);

• match - regex match text
• key - unique key for the match

Usage - Generic Function

import { linkIt, UrlComponent } from 'react-linkify-it';

const regexToMatch = /@([\w_]+)/;

const App = () => {

  const output = linkIt(
    // Text to be linkified
    text,
    // Component to wrap each match with, can be any React component
    (match, key) => <UrlComponent match={match} key={key} />,
    regexToMatch
  );

  return <div className="App">{output}</div>
};

• match - regex match text
• key - unique key for the match

Using multiple matches

Just use more than one component to match multiple patterns.

import { LinkItEmail, LinkItUrl } from 'react-linkify-it';

const App = () => (
  <div className="App">
    <LinkItUrl>
      <LinkItEmail>
        hello [e-mail] https://google.com
      </LinkItEmail>
    </LinkItUrl>
  </div>
);

Using modern and legacy bundle

By default, when you import react-linkify-it, it will use a modern bundle meant for browsers which support RegExp Unicode property escapes.

If you are using babel-preset-env, or any bundler configuration which uses it (e.g. create-react-app, vite) with a browser which does not support RegExp Unicode property escapes, babel will transform the code to support the browsers resulting in a larger bundle.

If your setup does not use babel-preset-env and you would still like to support older browsers, you can use the legacy bundle by importing:

For javascript projects

import { linkIt, LinkIt } from "react-linkify-it/legacy";

For typescript projects (why?)

import { linkIt, LinkIt } from "react-linkify-it/dist/react-linkify-it.legacy.esm.min";

Note: Legacy bundle has a larger file size (~3.4Kb minziped).

Using a browser bundle

An umd build with legacy browser support can be used from Unpkg.

Acknowledgment

This project was made possible due to the incredible work done on the following projects:

• sanitize-url
• react-linkify

License

This project is licensed under the MIT License - see the LICENSE file for details.