react-anchorme

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' }} />
}