joshswan / react-native-autolink

Automatic linking of URLs, phone numbers, emails, handles, and even custom patterns in text for React Native
MIT License
649 stars 82 forks source link

feat request: string pattern support #82

Open ridvanaltun opened 1 month ago

ridvanaltun commented 1 month ago

Hey, I did something like this to support string patterns:

import React from 'react';

import Autolink, {AutolinkProps, CustomMatcher} from 'react-native-autolink';

const escapeRegExp = (value: string) => {
  return value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
};

interface CustomMatcherInstance extends Omit<CustomMatcher, 'pattern'> {
  pattern: RegExp | string;
}

interface Props extends Omit<AutolinkProps, 'matchers'> {
  matchers: CustomMatcherInstance[];
}

const AutolinkInstance = ({matchers, ...props}: Props) => {
  return (
    <Autolink
      matchers={matchers.map(matcher => ({
        ...matcher,
        pattern:
          typeof matcher.pattern === 'string'
            ? new RegExp(escapeRegExp(matcher.pattern))
            : matcher.pattern,
      }))}
      {...props}
    />
  );
};

export default AutolinkInstance;

My aim increase the usability. I don't know is there any issue with it but it worked so far.

What do you think? @joshswan

joshswan commented 1 month ago

My initial reaction is that I like the idea of a createMatcher (or similar) utility that helps create custom matchers and can support using string patterns. But it should probably also make it easy to create capturing groups, similar in concept to path-to-regexp.

Needing to rebuild the regex on every render is something I'd like to avoid, which is why I think it should be separate from the component itself.