react-ninja / react-text-format

React component to parse urls, emails, credit cards, phone in text into clickable links or required format

react-text-format

React Component to find and parse links, emails, phone numbers, image's URL, credit cards and keywords to required format.

View live demo here

Installation

yarn add react-text-format

or

npm install react-text-format --save

Basic Usage

import ReactTextFormat from 'react-text-format';

React.render(
    <ReactTextFormat>
      This is demo link http://www.google.com
      This is demo email <span data-email="[email protected]">[email protected]</span>

      This is demo image https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg

      This is demo credit Card 5555555555554444
      This is demo phone Number 123.456.7890
      This is demo phone Number [phone]
      This is demo phone Number [phone]
      This is demo phone Number 212-555-1212 ext. 101
      This is demo phone Number 212 555 1212 x101

      This is an anchor <a href="http://formatter.com">http://formatter.com</a>;
    </ReactTextFormat>,
  document.body
);

Output:

Advance Usage

import ReactTextFormat from 'react-text-format';

customLinkDecorator = (
    decoratedHref: string,
    decoratedText: string,
    linkTarget: string
  ): React.Node => {
    return (
      <a
        href={decoratedHref}

        target={linkTarget}
        rel='noopener'
        className='customLink'
      >
        {decoratedText}
      </a>
    )
  }

customImageDecorator = (
    decoratedURL: string
    ): React.Node => {
    return (
      <div>
        <img src={decoratedURL}  rel='noopener' width="100" className='customImage' />
      </div>
)
}

customEmailDecorator = (
    decoratedHref: string,
    decoratedText: string
    ): React.Node => {
    return (
      <a href={decoratedHref}  className='customEmail'>
        {decoratedText}
      </a>
    )
}

customPhoneDecorator = (
    decoratedText: string
    ): React.Node => {
    return (
      <a href={`tel:${decoratedText}`} className='customPhone'>
        {decoratedText}
      </a>
    )
}

customCreditCardDecorator = (
    decoratedText: string
    ): React.Node => {
    return (
      <i  className='customCreditCard'>
        <b>{decoratedText}</b>
      </i>
    )
}

customTermDecorator = (decoratedText: string): React.Node => {
  return (
    <b  className="keyword">
      {decoratedText}
    </b>
  );
};

React.render(
    <ReactTextFormat
          allowedFormats={['URL', 'Email', 'Image', 'Phone', 'CreditCard']}
          linkDecorator={customLinkDecorator}
          emailDecorator={customEmailDecorator}
          phoneDecorator={customPhoneDecorator}
          creditCardDecorator={customCreditCardDecorator}
          imageDecorator={customImageDecorator}
          terms={["Link", "phone", "image", "Anchor", "email", "Credit"]}
          >
            This is demo link http://www.google.com
            This is encoded Link http://go%2Emsn%2Ecom/nl/133942%2Easp
            This is demo email <span data-email="[email protected]">[email protected]</span>

            This is demo image
            https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg

            This is demo credit Card 5555555555554444

            This is demo phone Number 123.456.7890
            This is demo phone Number [phone]
            This is demo Phone Number [phone]
            This is demo phone Number 212-555-1212 ext. 101
            This is demo phone Number 212 555 1212 x101

            This is an anchor <a href="http://formatter.com">http://formatter.com</a>;
        </ReactTextFormat>,
        document.body
);

Output:

Props

Name	Type	Default
allowedFormats	Array ['URL', 'Email', 'Image', 'Phone', 'CreditCard', 'Term']	['URL', 'Email', 'Phone', 'Term']
linkTarget	String (_blank | _self | _parent | _top | framename)	_self
terms	Array of strings	[]
linkDecorator	React.Node (decoratedHref: string, decoratedText: string, linkTarget: string)	Output Format: <a href="{URL}" target="{target}" rel='noopener' className='rtfLink'> <URL> </a>
emailDecorator	React.Node (decoratedHref: string, decoratedText: string)	Output Format:<a href="mailto: {EMAIL ADDRESS}" className='rtfEmail'> {EMAIL ADDRESS} </a>
phoneDecorator	React.Node (decoratedText: string)	Output Format<a href="tel:{PHONE NUMBER}" className='rtfEmail'> {PHONE NUMBER} </a>
creditCardDecorator	React.Node (decoratedText: string)	Output Format: <span className='rtfCreditCard'> {CREDIT CARD NUMBER} </span>
imageDecorator	React.Node (decoratedURL: string)	Output Format: <img src="{URL OF IMAGE}" rel='noopener' className='rtfImage' />
termDecorator	React.Node (decoratedText: string)	Output Format: <span className='rtfTerm'>{decoratedText}</span>

react-text-format's Issues

Possible to Extend?

Thanks for a great lib!

Is there any way to extend this? For example to discern youtube, or vimeo links for embedding?

String containing `%` will crash the component

If the string passed to component children contains %, it will crash the component hence crashing the whole renderer.
This happens because decodeURIComponent used on src/parsers/scrapper.js line 20 will throw an error URIError if the string contains % not followed by two hex digits or it does not produce valid UTF-8 character (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent).
So if the string contains something like It's 5% of the whole, it will crash.

Matching URL's that contain spaces %20

Hi, Thanks for this awesome add on.

I ran into an issue where If the link contains white space "%20", (I know right people should never be using white space in their URL's)

Then the link gets trimmed short and thus incorrect

for example using the encoded link: http://go%2Emsn%2Ecom/nl/133942%20Easp

it renders as
<a href="http://go.msn.com/nl/133942" target="_blank" rel="noopener" >http://go.msn.com/nl/133942</a> Easp

Is there a temporary workaround for this to include %20 in the regex to match the whitespace?

Unable to pass empty string as children

it should not fail but there is a check there that throws a null exception.

if (string === '') {
throw null
}

Request: support spaces in phone numbers

This is just a feature request to support spaces in phone numbers such as [phone]

Currently this is not picked up as a phone number because of the space

Remove console.log from code

Remove console.log from existing code and add a wrapper method which perform console.*** operations for local environment.
https://github.com/react-ninja/react-text-format/blob/master/src/decorators/defaultMatchDecorator.js#L136

Create hierarchy on decorator?

I was trying to create a highlight for a search text but it din't work if I am searching by the words in the url. Can a hierarchy over the decorators be created, to overwrite if it is both URL and term for instance?

add a fallback solution if code crashes

Request: remove console.log calls

Great library,

would you be open to publishing a release without the console.log calls enabled by default?

Cheers

Request, update to support React 18

Are there plans to support React 18?

Thanks!