# react-anchorme
> React component to detect links in text and make them clickable
Latest version **5.1.0** (published 2026-03-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-anchorme
pnpm add react-anchorme
yarn add react-anchorme
bun add react-anchorme
```
## Health
**Score 60/100 (C)** — status: active.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 5.1.0 |
| Published | 2026-03-25 |
| First published | 2020-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 74 |
| Author | Pavel Potáček |
| Maintainers | potty |
## Links
- npm: https://www.npmjs.com/package/react-anchorme
- Repository: https://github.com/potty/react-anchorme
- Homepage: https://github.com/potty/react-anchorme#readme
- Issues: https://github.com/potty/react-anchorme/issues
- npm.io page: https://npm.io/package/react-anchorme
## Dependencies (1)
- [anchorme](https://npm.io/package/anchorme.md) ^3.0.8
## Recent versions
- 5.1.0 (latest) — 2026-03-25
- 5.0.0 — 2025-03-23
- 4.0.1 — 2023-06-30
- 4.0.0 — 2023-06-30
- 3.0.0 — 2023-01-31
- 2.2.1 — 2021-06-07
- 2.2.0 — 2021-03-28
- 2.1.1 — 2021-01-21
- 2.1.0 — 2020-09-05
- 2.0.0 — 2020-06-18
- 1.1.0 — 2020-05-09
- 1.0.1 — 2020-05-01
- 1.0.0 — 2020-04-30
## README
# react-anchorme
 [](https://bundlephobia.com/result?p=react-anchorme) 
React component using [Anchorme.js](https://github.com/alexcorvi/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
```bash
# 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.
```jsx
import React from 'react'
import { Anchorme } from 'react-anchorme'
const SomeComponent = () => {
return Lorem ipsum http://example.loc dolor sit amet
}
```
### Custom props
You can set custom anchor props that are applied to every link created by the component.
```jsx
import React from 'react'
import { Anchorme } from 'react-anchorme'
const SomeComponent = () => {
return (
Lorem ipsum http://example.loc dolor sit amet
)
}
```
### 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 (`…`).
```jsx
import React from 'react'
import { Anchorme } from 'react-anchorme'
const SomeComponent = () => {
return (
Lorem ipsum example.com dolor sit amet
)
}
```
> **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 `` element. The component receives all anchor props plus `href` via `LinkComponentProps`.
```jsx
import React from 'react'
import { Anchorme, LinkComponentProps } from 'react-anchorme'
const CustomLink = (props: LinkComponentProps) => {
return (
)
}
const SomeComponent = () => {
return (
Lorem ipsum http://example.loc dolor sit amet
)
}
```
## 📋 Props
| Prop | Type | Required | Description |
| --------------- | --------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | `string \| string[]` | Yes | Text content to parse for links. Arrays of strings are joined internally. |
| `linkComponent` | `React.ElementType` | No | Custom component to render links instead of ``. |
| `truncate` | `number` | No | Maximum character length for displayed link text. Display-only — does not affect `href`. |
| ...anchor props | `React.HTMLProps` | No | Any standard `` 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:
```ts
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` — use to type custom link components |
### Typing a custom link component
```tsx
import { LinkComponent, LinkComponentProps } from 'react-anchorme'
const CustomLink: LinkComponent = (props: LinkComponentProps) => {
return
}
```
---
_Source: https://npm.io/package/react-anchorme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._