Skip to content

⚓️ React component using Anchorme.js to detect urls and emails in a text and converts them into clickable HTML links.

License

Notifications You must be signed in to change notification settings

potty/react-anchorme

Repository files navigation

react-anchorme

npm bundle size npm

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

About

⚓️ React component using Anchorme.js to detect urls and emails in a text and converts them into clickable HTML links.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published