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';

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

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

EmailDecorator

import ReactTextFormat from 'react-text-format';

function CustomEmailDecorator(href, text, key) {
  return (
    <a href={href} key={key} className="customemail">
      {text}
    </a>
  );
};

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

PhoneDecorator

import ReactTextFormat from 'react-text-format';

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

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

CreditCardDecorator

import ReactTextFormat from 'react-text-format';

function CustomCreditCardDecorator(text, key) {
  return (
    <a href={`tel:${decoratedText}`} key={key} className="customCCStyle" onClick={() => { alert("This is credit card"); }}>
      <i className="fa fa-phone"></i> {decoratedText}
    </a>
  );
};

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