linkify-react is a React component that provides an interface to the underlying linkifyjs library, enabling the automatic detection and conversion of URLs, email addresses, and other specified patterns (such as hashtags via plugins) within text content into clickable HTML `<a>` elements. The current stable version is `4.3.2`. This package is actively maintained, with frequent patch and minor releases, often in close alignment with updates to the core `linkifyjs` library. A key differentiator is its seamless integration into React applications, allowing developers to declaratively render linkified text. It offers extensive customization options for link behavior, attributes, and rendered element types, abstracting away direct DOM manipulation. It serves as a user-friendly wrapper over `linkifyjs` to handle the complexities of parsing and rendering links within a React component tree.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
The Linkify component is the default export. Use direct import for ESM or `require` for CJS environments.
import Linkify from 'linkify-react';
Configuration options for Linkify are defined in the core `linkifyjs` package, not `linkify-react`.
import type { LinkifyOptions } from 'linkifyjs';
Plugins like 'hashtag' or 'mention' extend `linkifyjs` functionality via side effects and must be imported directly from the `linkifyjs/plugins/` path. They don't expose named exports.
import 'linkifyjs/plugins/hashtag';
Demonstrates the basic usage of the Linkify component and advanced customization options. It shows how to apply custom attributes, format link text, provide custom React components for links, handle specific link types like hashtags, and validate links before rendering.
import React from 'react';
import Linkify from 'linkify-react';
import 'linkifyjs/plugins/hashtag'; // Optional: Import plugins for additional link types
const LinkifyExample = () => {
const textWithLinks = "Visit my website at example.com, email me at info@example.org, or check out #myproject on social media.";
const customOptions = {
// Customize attributes for all links
attributes: {
target: '_blank',
rel: 'noopener noreferrer',
className: 'my-custom-link'
},
// Format the displayed text for URLs longer than 30 characters
format: {
url: (value: string) => value.length > 30 ? value.substring(0, 27) + '...' : value,
},
// Provide a custom React component for all links
component: ({ tagName, attributes, content }: any) => {
const Tag = tagName; // 'a'
return (
<Tag {...attributes} style={{ color: 'darkgreen', fontWeight: 'bold' }}>
{content}
</Tag>
);
},
// Render specific link types differently (e.g., hashtags)
render: {
hashtag: ({ tagName, content, href }: any) => (
<a key={href} href={`https://twitter.com/hashtag/${content}`} style={{ color: 'purple' }}>
#{content}
</a>
)
},
// Validate specific link types (e.g., only 'https' URLs)
validate: {
url: (value: string) => value.startsWith('https://')
}
};
return (
<div>
<h1>Linkify React Usage Example</h1>
<p>Original text: "{textWithLinks}"</p>
<div style={{ border: '1px solid #eee', padding: '15px', backgroundColor: '#f9f9f9' }}>
<h2>Default Linkify:</h2>
<Linkify>{textWithLinks}</Linkify>
</div>
<div style={{ border: '1px solid #eee', padding: '15px', marginTop: '20px', backgroundColor: '#f9f9f9' }}>
<h2>Linkify with Custom Options:</h2>
<Linkify options={customOptions}>{textWithLinks}</Linkify>
</div>
</div>
);
};
export default LinkifyExample;
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.