react-anchorme
TypeScript icon, indicating that this package has built-in type declarations

4.0.1 • Public • Published

react-anchorme

npm bundle size David

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-anchorme

Weekly Downloads

12,212

Version

4.0.1

License

MIT

Unpacked Size

10.1 kB

Total Files

14

Last publish

Collaborators

  • potty