react-text-format

react-text-format

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

Basic

Any link that appears inside the ReactTextFormat component will become clickable.

<ReactTextFormat>Contact me via my gmail.com account [e-mail] or call me at 123.456.7890</ReactTextFormat>

Advanced

If you're feeling lazy, you can wrap ReactTextFormat around anywhere that you want links to become clickable. Even with nested elements, it traverses the tree to find links.

<ReactTextFormat>
  <div>react-text-format <span>([e-mail])</span></div>
    <div>React component to parse links urls, emails, credit cards, phone in text into required format</div>
    <footer>Contact: [e-mail]</footer>
</ReactTextFormat>

Renders to:

react-text-format ([e-mail]) React component to parse links urls, emails, credit cards, phone in text into required format Contact: [e-mail]

Installation

yarn add react-text-format

or

npm install react-text-format --save

Usage

import ReactTextFormat from 'react-text-format';

React.render(
  <ReactTextFormat>
    We need your feedback at [e-mail].
  </ReactTextFormat>,
  document.body,
);

Props

component The type of component to wrap links in. type: any default: 'a'

properties The props that will be added to every matched component. type: object default: {}

LinkTarget The target attribute specifies where to open the linked document (_blank|_self|_parent|_top|framename)

LinkDecorator You can create your own decorator for links and define that as a prop. ReactTextFormat will find the links and will render the links in defined format.

import ReactTextFormat from 'react-text-format';

customLinkDecorator = (href, text, linkTarget, key) => {
    return (
      <a
        href={href}
        key={key}
        target={linkTarget}
        rel="noopener"
        className="customLinkStyle"
      >
        {text}
      </a>
    );
  };

React.render(
  <ReactTextFormat LinkDecorator={customLinkDecorator}>We need your feedback at [e-mail].</ReactTextFormat>,
  document.body
);

EmailDecorator

import ReactTextFormat from 'react-text-format';

customEmailDecorator = (href, text, key) => {
    return (
      <a href={href} key={key} className="customEmailStyle">
        {text}
      </a>
    );
};

React.render(
  <ReactTextFormat EmailDecorator={customEmailDecorator}>We need your feedback at [e-mail].</ReactTextFormat>,
  document.body
);

PhoneDecorator

import ReactTextFormat from 'react-text-format';

customPhoneDecorator = (text, key) => {
    return (
      <a href={`tel:${text}`} key={key} className="customPhoneStyle">
        <i className="fa fa-phone" /> {text}
      </a>
    );
};

React.render(
  <ReactTextFormat PhoneDecorator={customPhoneDecorator}>We need your feedback at [e-mail].</ReactTextFormat>,
  document.body
);

CreditCardDecorator

import ReactTextFormat from 'react-text-format';

customCreditCardDecorator = (text, key) => {
    return (
      <span
        key={key}
        className="customCreditCardStyle"
        onClick={() => {
          alert('1234545');
        }}
      >
        {text}
      </span>
    );
  };

React.render(
  <ReactTextFormat CreditCardDecorator={customCreditCardDecorator}>We need your feedback at [e-mail].</ReactTextFormat>,
  document.body
);