react-anchorme
v4.0.1
Published
React component to detect links in text and make them clickable
Downloads
140,054
Readme
react-anchorme
React component using Anchorme.js to detect urls and emails in a text and converts them into clickable HTML links.
🚀 Installation
# npm
npm i react-anchorme
# Yarn
yarn 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.
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 up truncate
prop:
import React from 'react'
import { Anchorme } from 'react-anchorme'
const SomeComponent = () => {
return (
<Anchorme truncate={5}>
Lorem ipsum example.com dolor sit amet
</Anchorme>
)
}
Custom link component
You can set custom link component that is rendered instead of default anchor element.
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>
)
}