react-linkify-all

react-linkify-all

• Preview
• Description
• Installation
• Basic Usage
• Own components and patterns
• Example with linkify() method

Preview

Try it on CodeSandBox: https://codesandbox.io/s/compassionate-meitner-y8d9l9

Popup functionality:

Code:

Description

Modal pop up on hover, clickable links in text - all is here. This is NPM package that converts text with links into an array of React components. Customizable. Built-in support of emails, Telegram, Twitter mentions. Modal pop up can be implemented as it shown above. 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 like "twitters", "emails" could be added optionally.

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

Example with react components:

Code:

Result HTML:

Nesting is not supported yet: use 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
link: https://site.com
i: 1

Creating 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>

This 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

Example with linkify() method

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