react-linkify-it

react-linkify-it 🔗

A tiny and dependency free universal linking solution that turns any pattern in your text into clickable links (aka linkify). Supports i18n and emojis.

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 < v5.0.0 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.

Support

Hey 👋 If my packages has helped you in any way, consider making a small donation to encourage me to keep contributing. Maintaining good software takes time and effort and for open source developers there is very less incentives to do so. Your contribution is greatly appreciated and will motivate me to continue to support developing my packages which you may have used.