Maybe can we create a wiki of common regex patterns

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 [email protected] 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 [email protected] 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:

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.

	export const urlRegex =
	/(https?:\/\/\|www\.)([-\w.]+\/[\p{L}\p{Emoji}\p{Emoji_Component}!#$%&'"()+,./\\:;=_?@[\]~-][^\s'",.;:\b)\]}?]\|(([\w-]+\.)+[\w-]+[\w/-]))/u;

anantoghosh / react-linkify-it Goto Github PK

react-linkify-it's Introduction

react-linkify-it 🔗

Features

Notes

Demo

Installation

Usage - Prebuilt Components

1. Urls

2. Jira Tickets

3. Twitter handles

4. Emails

Usage - Generic Component

Usage - Generic Function

Using multiple matches

Using modern and legacy bundle

For javascript projects

For typescript < v5.0.0 projects (why?)

Using a browser bundle

Acknowledgment

License

Support

react-linkify-it's People

Contributors

Stargazers

Watchers

Forkers

react-linkify-it's Issues

Awaiting Schedule

Rate-Limited

Open

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org