npmpackage.info

Gathering detailed insights and metrics for react-linkify-it

Other packages similar to react-linkify-it

react-text-format

2.0.32

React Component to find and parse links, emails, phone numbers, credit cards and keywords to required format.

Gathering detailed insights and metrics for react-linkify-it

react-linkify-it - 1.0.8 | npmpackage.info

react-linkify-it

A tiny react package that turns urls (with i18n and emoji support), emails, jira tickets, twitter handles, anything you want! in your text clickable (aka linkify).

1.0.8

MIT

TypeScript

1.10 kB

2.5

Installations

npm install react-linkify-it

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

16.20.1

NPM Version

8.19.4 Score

94.2

Supply Chain

99.5

Quality

75.9

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

8

Total

40

Closed

13

Merged

19

Issues

Open

3

Total

10

Closed

7

Releases

v1.0.8

Updated on Aug 11, 2023

v1.0.7

Updated on Jun 02, 2022

v1.0.6

Updated on May 26, 2022

v1.0.5

Updated on Apr 09, 2022

v1.0.4

Updated on Mar 05, 2022

v1.0.3

Updated on Mar 03, 2022

View All 23 releases

Languages

TypeScript

JavaScript

TypeScript (88.06%)

JavaScript (11.94%)

Developer

anantoghosh

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

56 Stars

162 Commits

3 Forks

1 Watchers

11 Branches

2 Contributors

Updated on Jun 27, 2025

Bundle Size

2.89 kB

Minified

1.10 kB

Minified + Gzipped

Bundlephobia

Sponsor this package

https://github.com/sponsors/anantoghosh https://ko-fi.com/anantoghosh

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

1.0.8

Package Id

react-linkify-it@1.0.8

Unpacked Size

52.16 kB

Size

12.71 kB

File Count

NPM Version

8.19.4

Node Version

16.20.1

Published on

Aug 11, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

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

1npm i react-linkify-it

Usage - Prebuilt Components

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

1. Urls

1import { LinkItUrl } from 'react-linkify-it';
2
3const App = () => (
4  <div className="App">
5    <LinkItUrl>
6      <p>"add some link https://www.google.com here"</p>
7    </LinkItUrl>
8  </div>
9);
10

2. Jira Tickets

1import { LinkItJira } from 'react-linkify-it';
2
3const App = () => (
4  <div className="App">
5    <LinkItJira domain="https://projectid.atlassian.net">
6      hello AMM-123 ticket
7    </LinkItJira>
8  </div>
9);

3. Twitter handles

1import { LinkItTwitter } from 'react-linkify-it';
2
3const App = () => (
4  <div className="App">
5    <LinkItTwitter>
6      hello @anantoghosh twitter
7    </LinkItTwitter>
8  </div>
9);

4. Emails

1import { LinkItEmail } from 'react-linkify-it';
2
3const App = () => (
4  <div className="App">
5    <LinkItEmail>
6      hello example@gmail.com email
7    </LinkItEmail>
8  </div>
9);

Usage - Generic Component

1import { LinkIt } from 'react-linkify-it';
2
3const regexToMatch = /@([\w_]+)/;
4
5const App = () => (
6  <div className="App">
7    <LinkIt
8      {/* Component to wrap each match with */}
9      component={(match, key) => <a href={match} key={key}>{match}</a>}
10      regex={regexToMatch}
11    >
12      www.google.com<div>hi @anantoghosh</div>
13    </LinkIt>
14  </div>
15);
16

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

Usage - Generic Function

1import { linkIt, UrlComponent } from 'react-linkify-it';
2
3const regexToMatch = /@([\w_]+)/;
4
5const App = () => {
6
7  const output = linkIt(
8    // Text to be linkified
9    text,
10    // Component to wrap each match with, can be any React component
11    (match, key) => <UrlComponent match={match} key={key} />,
12    regexToMatch
13  );
14
15  return <div className="App">{output}</div>
16};
17

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

Using multiple matches

Just use more than one component to match multiple patterns.

1import { LinkItEmail, LinkItUrl } from 'react-linkify-it';
2
3const App = () => (
4  <div className="App">
5    <LinkItUrl>
6      <LinkItEmail>
7        hello example@gmail.com https://google.com
8      </LinkItEmail>
9    </LinkItUrl>
10  </div>
11);
12

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

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

For typescript < v5.0.0 projects (why?)

1import { 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.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/node.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/node.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/node.js.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/node.js.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/node.js.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/npm-publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/anantoghosh/react-linkify-it/npm-publish.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/node.js.yml:35
Info: 0 out of 12 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 0 out of 1 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-linkify-it

Other packages similar to react-linkify-it

react-linkify-it

Installations

Developer Guide

Yes

ESM

16.20.1

8.19.4

Score

Pull Requests

8

40

13

19

Issues

3

10

7

Releases

Languages

Developer

anantoghosh

Download Statistics

GitHub Statistics

Bundle Size

2.89 kB

1.10 kB

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

NaN

Peer Dependencies

Dev Dependencies

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

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads