react-anchorme

React component using Anchorme.js to detect URLs, emails, and IP addresses in text and convert them into clickable HTML links.

Compatibility: React 16.8+ through React 19 | Dual CJS/ESM build | Tree-shakeable (sideEffects: false)

🚀 Installation

# npm
npm i react-anchorme

# Yarn
yarn add react-anchorme

# pnpm
pnpm add react-anchorme

🖲 Usage

Basic usage

The component takes a string as children, detects URLs, emails, and IP addresses in it, and replaces them with clickable HTML links.

import React from 'react'
import { Anchorme } from 'react-anchorme'

const SomeComponent = () => {
	return <Anchorme>Lorem ipsum http://example.loc dolor sit amet</Anchorme>
}

Custom props

You can set custom anchor props that are applied to every link created by the component.

import React from 'react'
import { Anchorme } from 'react-anchorme'

const SomeComponent = () => {
	return (
		<Anchorme target="_blank" rel="noreferrer noopener">
			Lorem ipsum http://example.loc dolor sit amet
		</Anchorme>
	)
}

Truncate

You can truncate link text by setting the truncate prop. This is display-only — the href always contains the full URL. When text exceeds the specified length, it is truncated with an ellipsis character (…).

import React from 'react'
import { Anchorme } from 'react-anchorme'

const SomeComponent = () => {
	return (
		<Anchorme truncate={5}>Lorem ipsum example.com dolor sit amet</Anchorme>
	)
}

Note: Passing a non-positive truncate value will throw an error in development to help catch mistakes. This validation is stripped in production builds.

Custom link component

You can provide a custom link component that is rendered instead of the default <a> element. The component receives all anchor props plus href via LinkComponentProps.

import React from 'react'
import { Anchorme, LinkComponentProps } from 'react-anchorme'

const CustomLink = (props: LinkComponentProps) => {
	return (
		<i>
			<a {...props} />
		</i>
	)
}

const SomeComponent = () => {
	return (
		<Anchorme linkComponent={CustomLink} target="_blank" rel="noreferrer noopener">
			Lorem ipsum http://example.loc dolor sit amet
		</Anchorme>
	)
}

📋 Props

| Prop | Type | Required | Description | | --------------- | --------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | children | string \| string[] | Yes | Text content to parse for links. Arrays of strings are joined internally. | | linkComponent | React.ElementType<LinkComponentProps> | No | Custom component to render links instead of <a>. | | truncate | number | No | Maximum character length for displayed link text. Display-only — does not affect href. | | ...anchor props | React.HTMLProps<HTMLAnchorElement> | No | Any standard <a> props (target, rel, className, style, etc.) are passed through to every rendered link. href is excluded as it is managed internally. |

🔗 Automatic protocol handling

The component automatically prepends the appropriate protocol to the href attribute when the detected text doesn't include one:

• URLs without protocol (e.g. example.com) get http:// prepended
• Email addresses get mailto: prepended
• URLs with existing protocol are left unchanged

Supported protocols: http://, https://, ftp://, ftps://, file:///, mailto:

The displayed link text always shows the original detected text — protocol prepending only affects the href.

🔷 TypeScript

The package exports the following types:

import { Anchorme, LinkComponentProps, LinkComponent } from 'react-anchorme'

| Export | Description | | -------------------- | ------------------------------------------------------------------------------------------- | | Anchorme | The main component | | LinkComponentProps | Props type received by a custom linkComponent ({ href: string } & AnchorProps) | | LinkComponent | Type alias for React.ElementType<LinkComponentProps> — use to type custom link components |

Typing a custom link component

import { LinkComponent, LinkComponentProps } from 'react-anchorme'

const CustomLink: LinkComponent = (props: LinkComponentProps) => {
	return <a {...props} style={{ color: 'red' }} />
}