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

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 SomeComponent = () => {
  const CustomLink = (props: LinkComponentProps) => {
    return (
      <i>
         <a {...props} />
      </i>
    )
  }

  return (
    <Anchorme linkComponent={CustomLink} target="_blank" rel="noreferrer noopener">
        Lorem ipsum http://example.loc dolor sit amet
    </Anchorme>
  )
}