react-linkify-all

react-linkify-all

NPM package that converts text with links to array of React components. Customizable. Built-in support of emails, Telegram, Twitter links. Own pattern can be used to linkify everything!

Installation

npm i react-linkify-all

Basic Usage

import { Linkify } from 'react-linkify-all'
...
<Linkify links twitters emails>Some text with links.net, @twitters and [e-mail]</Linkify>

Props "twitters", "emails" could be added optionally.

You can also use React components(<Emails/>, <Twitters/>, <Tgs/>, ...) and linkify() method.

Example for react components:

Nesting is not supported yet: use <Linkify .../> to summarize effects

Own components and patterns

You could use your own component for links:

const component = (match, i, link) => {
    return <a href={link} style={{color:"yellow"}}>#{i}. {match}</a>;
}
...
<Linkify ... component={component}>...</Linkify>

The "i" parameter can be used to number links(there is a counter for each type of link) Parameters "match" and "link" may differ. Example #1:

<Links>site.com</Links>

match: site.com i: 1 link: https://site.com

Own patterns

Every pattern for linkify is set by an object:

const option = {
    regex: RegExp, //          /(...)/g,
    component?: (match, i, link) => ReactElement,
    linkFn?: (match:string) => string
}

WARNING: be sure to put parentheses around the regular expression. In addition, every internal capturing group should be not captured. RegEx should capture only the entrie word you need.

The default component is:

const defaultComponent = (match, i, link) => <a href={link}>{match}</a>;

"linkFn" is a function for converting a match into a link. In Example #1 above, linkFn is:

const example = match => match.substring(0, 4) === 'http' ? match : 'https://'+match

It is used to handle matches like site.com and https://site.com

Using own patterns

const option = {
    regex: new RegExp("((?<=\\B)@[a-zA-Z0-9_]{5,32}(?=\\b))", "g"),
    component: (match, i, link) => <a href={link}>{match}</a>,
    linkFn: match => "https://twitter.com/"+match.substring(1)
  };
...
<Linkify options={option}>...</Linkify>

That example will wrap every Twitter profile mention into <a> tag.

Also, you can combine options:

<Linkify options={[option1, option2, ..., optionN]}>...</Linkify>

They will be applied consistently

linkify() function usage example

import { linkify } from 'react-linkify-all';
...
const Card = (text) => {
    const option = ...;
    const result = linkify(text, option);
    return <div>{result}</div>;
}