https://github.com/potty/react-anchorme
⚓️ React component using Anchorme.js to detect urls and emails in a text and converts them into clickable HTML links.
https://github.com/potty/react-anchorme
links react typescript
Last synced: 6 months ago
JSON representation
⚓️ React component using Anchorme.js to detect urls and emails in a text and converts them into clickable HTML links.
- Host: GitHub
- URL: https://github.com/potty/react-anchorme
- Owner: potty
- License: mit
- Created: 2020-04-29T17:13:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-01T03:51:29.000Z (almost 2 years ago)
- Last Synced: 2024-04-26T15:04:48.441Z (over 1 year ago)
- Topics: links, react, typescript
- Language: TypeScript
- Homepage:
- Size: 502 KB
- Stars: 55
- Watchers: 3
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-anchorme
 [](https://bundlephobia.com/result?p=react-anchorme) 
React component using [Anchorme.js](https://github.com/alexcorvi/anchorme.js) to detect urls and emails in a text and converts them into clickable HTML links.
## 🚀 Installation
```bash
# npm
npm i react-anchorme
# Yarn
yarn add react-anchorme
# pnpm
pnpm add react-anchorme
```
## 🖲 Usage
### Basic usage
Component takes string as a children, detects urls, emails, IP addresses in it and replaces them with clickable HTML links.
```jsx static
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 static
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 up `truncate` prop:
```jsx static
import React from 'react'
import { Anchorme } from 'react-anchorme'
const SomeComponent = () => {
return (
Lorem ipsum example.com dolor sit amet
)
}
```
### Custom link component
You can set custom link component that is rendered instead of default anchor element.
```jsx static
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
)
}
```