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

# 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.

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