Registry / web-framework / react-linkify

react-linkify

library1.0.0-alphajsnpmunverified

A React component that automatically transforms URLs, emails, and other linkable text patterns into clickable anchor tags. Current stable version is 0.2.2, with a 1.0.0-alpha release available. It wraps the linkify-it library and recurses through children to detect links, supporting custom component wrappers, properties, and the ability to customize the underlying linkify-it instance. Differentiators include simple declarative usage as a React component, support for nested elements, and full customization via the linkify-it API.

web-framework serialization

npm install react-linkify

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-LINKIFY

react-linkify

web-frameworkjavascriptv1.0.0-alpha

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Linkify

✓ import Linkify from 'react-linkify'

✗ const Linkify = require('react-linkify')

Default export; CJS require also works but ESM import is recommended.

linkify

✓ import { linkify } from 'react-linkify'

✗ import { linkify } from 'react-linkify' (correct, but common mistake is forgetting it's a named export)

Named export of the underlying linkify-it instance for customization.

MATCH

✓ import Linkify from 'react-linkify'; Linkify.MATCH

✗ import { MATCH } from 'react-linkify'

MATCH is a static property on the default export, not a named export.

Basic usage of the Linkify component to turn URLs and emails into clickable links.

import React from 'react'; import Linkify from 'react-linkify'; function App() { return ( <Linkify> Visit example.com or email test@example.com. </Linkify> ); } export default App;

Debug

Known issues

deprecatedLinkify.MATCH is no longer exported as a constant in v1.0.0-alpha. Use a custom string placeholder instead.

fix

Define your own MATCH placeholder string and pass it via the 'properties' prop.

affects: >=1.0.0-alpha

breakingIn v1.0.0-alpha, the component no longer recurses into nested children by default; you must use <Linkify component='span'> to wrap text nodes.

fix

Pass a 'component' prop that wraps each link (e.g., 'span') to preserve existing behavior.

affects: >=1.0.0-alpha

gotchaLinkify modifies the global linkify-it instance when using the named export 'linkify'. This can lead to unexpected behavior if multiple components share the same instance.

fix

Clone or isolate the instance if you need separate configurations.

affects: *

Errors

Common errors & fixes

Module not found: Can't resolve 'linkify-it'

Missing dependency 'linkify-it' not automatically installed with react-linkify.

fix

Run 'npm install linkify-it' or 'yarn add linkify-it'.

TypeError: Cannot read property 'MATCH' of undefined

Using Linkify.MATCH in v1.0.0-alpha where it was removed.

fix

Use a plain string like 'MATCH' in the properties object instead.

Warning: Each child in a list should have a unique "key" prop

Linkify adds keys to generated <a> elements but may conflict with other keys in the same parent.

fix

Ensure the parent component provides its own keys to static children, or use React.Fragment to isolate.

Upgrade

Version history

1.0.0-alphalatest on npm

Audit

Dependencies

linkify-itrequiredCore library for link detection

Agent activity

12 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/tasti/react-linkify ↗

packagehttps://www.npmjs.com/package/react-linkify ↗

homepagehttp://tasti.github.io/react-linkify/ ↗