react-linkify-it icon indicating copy to clipboard operation
react-linkify-it copied to clipboard

Missing urls like youtube.com

Open Noitidart opened this issue 2 years ago • 2 comments

Is there reason you chose to not catch like youtube.com? Or should we try to find a regex that gets it too? This component I'm using:

const Linkify = memo((props: ILinkifyProps) => {
  return (
    <LinkItPhone>
      <LinkItUrl>
        <LinkItEmail>{props.children}</LinkItEmail>
      </LinkItUrl>
    </LinkItPhone>
  );
});

Linkify.displayName = 'Linkify';

const phoneRegex = /\+?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4,6}/;
const phoneLinkComponent = (match: string, key: number) => (
  <a href={'tel:' + match.replace(/\D/g, '')} key={key}>
    {match}
  </a>
);
const LinkItPhone = memo((props: { children: StrictReactNode }) => {
  return (
    <LinkIt component={phoneLinkComponent} regex={phoneRegex}>
      {props.children}
    </LinkIt>
  );
});
LinkItPhone.displayName = 'LinkItPhone';

Noitidart avatar Apr 08 '22 04:04 Noitidart

The reason react-linkify-it was created was because the other popular solutions were using tld based matching, i.e. they use a database of all domain endings to find out which are urls which is a huge data list. I had planned on creating another url domain matching component which would match using only the domains you specify, but I can't give you a timeline on that.

anantoghosh avatar Apr 08 '22 05:04 anantoghosh

Oh so that's what tld means. I didn't know that. Do you have a database you would prefer to use maybe I can help get a head start on it.

Noitidart avatar Apr 09 '22 21:04 Noitidart