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.

importReactfrom'react'import{Anchorme}from'react-anchorme'constSomeComponent=()=>{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.

importReactfrom'react'import{Anchorme}from'react-anchorme'constSomeComponent=()=>{return(<Anchormetarget="_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 (…).

importReactfrom'react'import{Anchorme}from'react-anchorme'constSomeComponent=()=>{return(<Anchormetruncate={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.

importReactfrom'react'import{Anchorme,LinkComponentProps}from'react-anchorme'constCustomLink=(props: LinkComponentProps)=>{return(<i><a{...props}/></i>)}constSomeComponent=()=>{return(<AnchormelinkComponent={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'constCustomLink: LinkComponent=(props: LinkComponentProps)=>{return<a{...props}style={{color: 'red'}}/>}