npmpackage.info

Gathering detailed insights and metrics for react-linkify-it

Other packages similar to react-linkify-it

linkify-it

5.0.0

Links recognition library with FULL unicode support

@types/linkify-it

5.0.0

TypeScript definitions for linkify-it

linkifyjs

4.1.4

Find URLs, email addresses, #hashtags and @mentions in plain-text strings, then convert them into HTML <a> links.

linkify-react

4.1.4

React element interface for linkifyjs

Gathering detailed insights and metrics for react-linkify-it

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

1,175,271 2.5

Installations

npm install react-linkify-it

Score

87.6

Supply Chain

98.6

Quality

75.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

9

Total

37

Closed

13

Merged

15

Issues

Open

2

Total

9

Closed

7

Releases

v1.0.8

Published on 11 Aug 2023

v1.0.7

Published on 02 Jun 2022

v1.0.6

Published on 26 May 2022

v1.0.5

Published on 09 Apr 2022

v1.0.4

Published on 05 Mar 2022

v1.0.3

Published on 03 Mar 2022

View all 23 releases

Contributors

View all 2 contributors

Developer

anantoghosh

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

Yes

Node Version

16.20.1

NPM Version

8.19.4 Statistics

53 Stars

152 Commits

3 Forks

1 Watching

11 Branches

2 Contributors

Updated on 26 Nov 2024

Bundle Size

2.89 kB

Minified

1.10 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (88.06%)

JavaScript (11.94%)

Total Downloads

Cumulative downloads

Total Downloads

1,175,271

Last day

-7.4%

1,843

Compared to previous day

Last week

-0.2%

11,194

Compared to previous week

Last month

8.4%

47,087

Compared to previous month

Last year

541,287

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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

Dangerous-Workflow

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

10

Binary-Artifacts

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

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:40: 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
Info: 0 out of 12 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned

0

CII-Best-Practices

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

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

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 2024-11-25

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

Score

Pull Requests

9

37

13

15

Issues

2

9

7

Releases

Contributors

Developer

anantoghosh

Developer Guide

ESM

Yes

16.20.1

8.19.4

Statistics

Bundle Size

2.89 kB

1.10 kB

Languages

Total Downloads

1,175,271

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

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