React component using Anchorme.js to detect urls and emails in a text and converts them into clickable HTML links.
# npm
npm i react-anchorme
# Yarn
yarn add react-anchorme
# pnpm
pnpm add react-anchormeComponent 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>
)
}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>
)
}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>
)
}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>
)
}