react-anchorme

  !npm

React component using 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

$3

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
)
}
`

$3

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

)
}
`

$3

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

)
}
`

$3

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

)
}
``