Open willysoriaguzman opened 6 years ago
the same issue, need to recognize telegram contacts
Any thoughts here? @willysoriaguzman did you find a solution?
You can do that by overriding the matchDecorator
. For example, this decorator detects arxiv IDs:
<Linkify
matchDecorator={value => {
const matches = value.matchAll(/\d{4}\.\d{4,5}/g);
return [...matches].map(match => {
return {
schema: '',
index: match.index || 0,
lastIndex: (match.index || 0) + match[0].length,
text: match[0],
url: `<your URL>`,
};
});
}}
>{text}</Linkify
Able to linkify phone numbers but urls stop getting linkify after this change. can you tell me how can show both urls and phone numbers
@hmittal1 Was you able to archive that?
Maybe too late, I solved by nested Linkify component
@iShaVas sorry i missed your comment. yes, i have modified the regex to cover aaaall valid scenarios.
export const linkifyRegex = /(+?\d[\s\-\d]{6,17}\d)|((https?:\/\/(?:www.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^\s]{2,}|www.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^\s]{2,}|https?:\/\/(?:www.|(?!www))[a-zA-Z0-9]+.[^\s]{2,}|www.[a-zA-Z0-9]+.[^\s]{2,}|[a-zA-Z]+.com[^\s]{0,}|[a-zA-Z]+.[a-zA-Z]{2,4}\/[^\s]{2,}))/g; export const phoneNumberRegex = /^+?\d[\s\-\d]{6,17}\d/;
matchDecorator={value => {
const matches = value.matchAll(linkifyRegex);
return [...matches].map(match => {
let url = match[0];
// Prepend 'tel:' string on open phone
// number linkify url into dailer app.
if (phoneNumberRegex.test(url)) {
url = tel: ${url}
;
}
return {
schema: '',
index: match.index || 0,
lastIndex: (match.index || 0) + match[0].length,
text: match[0],
url: ${url}
,
};
});
}}
I was reading this library uses linkify-it: (https://github.com/markdown-it/linkify-it), so I was wondering where should I add a new pattern to recognize for example phone numbers using react typescipt.
Is there any example to achieve this or similar behaviour?