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

1import ReactTextFormat from 'react-text-format';
2
3React.render(
4    <ReactTextFormat>
5      This is demo link http://www.google.com
6      This is demo email <span data-email="miller@yahoo.com">miller@yahoo.com</span>
7
8      This is demo image https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg
9
10      This is demo credit Card 5555555555554444
11      This is demo phone Number 123.456.7890
12      This is demo phone Number (212) 555 1212
13      This is demo phone Number (212) 555-1212
14      This is demo phone Number 212-555-1212 ext. 101
15      This is demo phone Number 212 555 1212 x101
16
17      This is an anchor <a href="http://formatter.com">http://formatter.com</a>;
18    </ReactTextFormat>,
19  document.body
20);

Output:

Advance Usage

1import ReactTextFormat from 'react-text-format';
2
3customLinkDecorator = (
4    decoratedHref: string,
5    decoratedText: string,
6    linkTarget: string
7  ): React.Node => {
8    return (
9      <a
10        href={decoratedHref}
11
12        target={linkTarget}
13        rel='noopener'
14        className='customLink'
15      >
16        {decoratedText}
17      </a>
18    )
19  }
20
21customImageDecorator = (
22    decoratedURL: string
23    ): React.Node => {
24    return (
25      <div>
26        <img src={decoratedURL}  rel='noopener' width="100" className='customImage' />
27      </div>
28)
29}
30
31customEmailDecorator = (
32    decoratedHref: string,
33    decoratedText: string
34    ): React.Node => {
35    return (
36      <a href={decoratedHref}  className='customEmail'>
37        {decoratedText}
38      </a>
39    )
40}
41
42customPhoneDecorator = (
43    decoratedText: string
44    ): React.Node => {
45    return (
46      <a href={`tel:${decoratedText}`} className='customPhone'>
47        {decoratedText}
48      </a>
49    )
50}
51
52customCreditCardDecorator = (
53    decoratedText: string
54    ): React.Node => {
55    return (
56      <i  className='customCreditCard'>
57        <b>{decoratedText}</b>
58      </i>
59    )
60}
61
62customTermDecorator = (decoratedText: string): React.Node => {
63  return (
64    <b  className="keyword">
65      {decoratedText}
66    </b>
67  );
68};
69
70React.render(
71    <ReactTextFormat
72          allowedFormats={['URL', 'Email', 'Image', 'Phone', 'CreditCard']}
73          linkDecorator={customLinkDecorator}
74          emailDecorator={customEmailDecorator}
75          phoneDecorator={customPhoneDecorator}
76          creditCardDecorator={customCreditCardDecorator}
77          imageDecorator={customImageDecorator}
78          terms={["Link", "phone", "image", "Anchor", "email", "Credit"]}
79          >
80            This is demo link http://www.google.com
81            This is encoded Link http://go%2Emsn%2Ecom/nl/133942%2Easp
82            This is demo email <span data-email="miller@yahoo.com">miller@yahoo.com</span>
83
84            This is demo image
85            https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg
86
87            This is demo credit Card 5555555555554444
88
89            This is demo phone Number 123.456.7890
90            This is demo phone Number (212) 555 1212
91            This is demo Phone Number (212) 555-1212
92            This is demo phone Number 212-555-1212 ext. 101
93            This is demo phone Number 212 555 1212 x101
94
95            This is an anchor <a href="http://formatter.com">http://formatter.com</a>;
96        </ReactTextFormat>,
97        document.body
98);

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>