React Linkify

1.0.0-alpha verified Sat Apr 25 auth: no javascript

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.

Common errors

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

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

fix

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

error TypeError: Cannot read property 'MATCH' of undefined ↓

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

fix

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

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

cause 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.

Warnings

deprecated Linkify.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.

breaking In 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.

gotcha Linkify 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.

Install

npm install react-linkify

yarn add react-linkify

pnpm add react-linkify

Imports

Linkify
wrong
```
const Linkify = require('react-linkify')
```
correct
```
import Linkify from 'react-linkify'
```
Default export; CJS require also works but ESM import is recommended.

linkify

wrong

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

correct

import { linkify } from 'react-linkify'

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

MATCH

wrong

import { MATCH } from 'react-linkify'

correct

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

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

Quickstart

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;