react-linkify-it
v2.0.0TypeScript
A super tiny <1KB, dependency-free, highly customizable React utility to turn any pattern in your text into clickable links or custom components. Instantly linkify URLs, emails, twitter handles, hashtags, mentions or anything else out of the box or with y
0/weekUpdated 4 months agoMITUnpacked: 78.0 KB
Published by Ananto Ghosh
npm install react-linkify-itreact-linkify-it π
A super tiny <1KB, dependency-free, highly customizable React utility to turn any pattern in your text into clickable links or custom components. Instantly linkify URLs, emails, twitter handles, hashtags, mentions or anything else out of the box or with your own rules.
!Tree shaking supported
---
Why You'll Love react-linkify-it β¨
- β‘ Super tiny: Less than 1KB gzipped after tree shaking!
- πͺΆ Zero dependencies: No bloat, No extra dependencies. Just a single file.
- π οΈ Ultra customizable: Linkify any pattern, use your own regex, wrap with any component. Adjust to your specific case as required.
- π Prebuilt for you: URLs, emails, twitter handles, hashtags, mentions - ready out of the box.
- π§ Generic: Not just links, wrap any pattern with _any_ component.
- 𧩠Composable: Nest, combine, and mix patterns as you like.
- π Blazing fast: Single-pass processing.
- π¦Ί Safe: Sanitizes URLs to prevent XSS.
- π i18n & emoji friendly: Works with URLs that contain international characters and emojis.
- π§Ή Tree-shakable: Only what you use gets bundled.
- π§ͺ Production ready: Thoroughly tested and used in real apps.
- βοΈ React support: Works with React v16.2+
Make your text interactive, your way. Fun, fast, and flexible! π
---
Demo
---
Installation
``sh`
npm i react-linkify-it
---
Usage
$3
These components make it super easy to linkify common patterns. All accept the following props:
- children (string | ReactNode, required): The content to scan and linkify.className
- (string, optional): CSS class for the anchor tag(s) created.
#### 1.
What it does:
Scans its children for URLs (http, https, www) and wraps them in tags.
Props:
- children (required): Content to linkify.className
- (optional): CSS class for the anchor tag.
`jsx
import { LinkItUrl } from 'react-linkify-it';
const App = () => (
add some link https://www.google.com here
);
`
#### 2.
What it does:
Finds Twitter handles (e.g.
) and links them to Twitter profiles.Props:
-
children (required): Content to linkify.
- className (optional): CSS class for the anchor tag.`jsx
import { LinkItTwitter } from 'react-linkify-it';const App = () => (
hello @anantoghosh twitter
);
`#### 3.
What it does:
Finds email addresses and wraps them in
links.Props:
-
children (required): Content to linkify.
- className (optional): CSS class for the anchor tag.`jsx
import { LinkItEmail } from 'react-linkify-it';const App = () => (
hello example@gmail.com email
);
`#### 4.
(Generic Component)What it does:
Lets you linkify any pattern using your own regex and custom component. Perfect for advanced use cases or custom patterns.
Props:
-
component (required): Function (match, key) => ReactNode to render each match.
- regex (required): RegExp to match your pattern.
- children (required): Content to linkify (string or ReactNode).`jsx
// Example: Linkify all '@mentions' and link internally
import { LinkIt } from 'react-linkify-it';
// If using Next.js:
import Link from 'next/link';const mentionRegex = /@([\p{L}\p{N}_]+)/u;
const App = () => (
component={(match, key) => (
/user/${encodeURIComponent(match.slice(1))}} key={key}>
{match}
)}
>
Welcome '@anantoghosh' and '@γ¦γΌγΆγΌ' to our app!
);
`#### 5.
What it does:
Finds hashtags (e.g.
, #ζ₯ζ¬θͺ) and links them to your chosen platform using a URL template.Props:
-
children (required): Content to linkify.
- urlTemplate (required): URL template with {hashtag} placeholder (without the #).
- className (optional): CSS class for the anchor tag.`jsx
import { LinkItHashtag } from 'react-linkify-it';const App = () => (
{/ Instagram example with Unicode /}
Love #sunset and #ζ₯ζ¬θͺ hashtags!
{/ Custom website example /}
Discussing #AI and #MachineLearning trends
);
`#### 6.
What it does:
Finds mentions (e.g.
, @γ¦γΌγΆγΌ) and links them to your chosen platform using a URL template.Props:
-
children (required): Content to linkify.
- urlTemplate (required): URL template with {mention} placeholder (without the @).
- className (optional): CSS class for the anchor tag.`jsx
import { LinkItMention } from 'react-linkify-it';const App = () => (
{/ Instagram example with Unicode /}
Welcome @newuser and @γ¦γΌγΆγΌ to our platform!
{/ Custom website example /}
Shoutout to @octocat and @defunkt for joining!
);
`$3
The
function is a utility for linkifying any string using your own regex and component, outside of React tree rendering.`jsx
import { linkIt, UrlComponent } from 'react-linkify-it';const regexToMatch = /@([\w_]+)/g;
const App = () => {
// 'linkIt' returns an array of React nodes or the original string
const output = linkIt(
text, // string to linkify
(match, key) =>
regexToMatch, // your regex
);
return
{output};
};
`$3
You can nest prebuilt components to linkify multiple patterns at once:
jsx
import {
LinkItEmail,
LinkItUrl,
LinkItHashtag,
LinkItMention,
} from 'react-linkify-it';const App = () => (
{/ Linkify URLs and emails together /}
hello example@gmail.com https://google.com
{/ Linkify hashtags and mentions together /}
Welcome @newuser to #ζ₯ζ¬θͺ!
);
`---
Customization
All prebuilt components accept the following props:
-
(string, optional): CSS class for the anchor tag.
- children (string | ReactNode): Content to linkify.The generic
LinkIt component accepts:-
component: Function (match, key) => ReactNode to render each match.
- regex: RegExp to match your pattern.
- children: Content to linkify.The
linkIt function accepts:-
text: String to process.
- component: Function (match, key) => ReactNode.
- regex: RegExp.You can also import and use the regex patterns directly:
`js
import {
urlRegex,
emailRegex,
twitterRegex,
} from 'react-linkify-it';
``---
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 have 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 are very few incentives to do so. Your contribution is greatly appreciated and will motivate me to continue supporting and developing my packages.