Modal pop up on hover, clickable links in text - everything 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. Own pattern can be used to link
npm install react-linkify-allsh
npm i react-linkify-all
`
Basic Usage
`jsx
import { Linkify } from 'react-linkify-all'
...
Some text with links.net, @twitters and emails@domain.org
`
Available props: emails, instagrams, links, tgs, twitters
And their corresponding components: `
Also you can use method `linkify()` to linkify(an example is given below).
$3
Code:
Result HTML:
Nesting is not supported yet: use ` ` to summarize effects
Own components and patterns
You could use your own component for links:
`jsx
const component = (match, i, link) => {
return #{i}. {match};
}
...
...
`
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:
`jsx
site.com
`
match: site.com
link: https://site.com
i: 1
$3
Every pattern for linkify is set by an object:
`jsx
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:
`jsx
const defaultComponent = (match, i, link) => {match};
`
"linkFn" is a function for converting a match into a link.
In Example #1 above, linkFn is:
`js
const example = match => match.substring(0, 4) === 'http' ? match : 'https://'+match
`
(It is used to handle matches like site.com and https://site.com)
$3
`jsx
const option = {
regex: new RegExp("((?<=\\B)@[a-zA-Z0-9_]{5,32}(?=\\b))", "g"),
component: (match, i, link) => {match},
linkFn: match => "https://twitter.com/"+match.substring(1)
};
...
...
`
This example will wrap every Twitter profile mention into tag.
Also, you can combine options:
`jsx
...
`
They will be applied consistently
Example with linkify() method
`jsx
import { linkify } from 'react-linkify-all';
...
const Card = (text) => {
const option = ...;
const result = linkify(text, option);
return {result};
}
``