text

React Component to find and format links

Jan 21, 2019
React Component to find and format links

react-text-format

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

Installation

yarn add react-text-format

or

npm install react-text-format --save

Props

NameTypeDefault
allowedFormatsArray ['URL', 'Email', 'Image', 'Phone', 'CreditCard']['URL', 'Email', 'Phone']
linkTargetString (_blank | _self | _parent | _top | framename)_self
LinkDecoratorReact.Node (decoratedHref: string, decoratedText: string, linkTarget: string, key: number)Output Format: <a href="{URL}" target="{target}" rel='noopener' className='rtfLink'> <URL> </a>
EmailDecoratorReact.Node (decoratedHref: string, decoratedText: string,key: number)Output Format:<a href="mailto: {EMAIL ADDRESS}" className='rtfEmail'> {EMAIL ADDRESS} </a>
PhoneDecoratorReact.Node (decoratedText: string, key: number)Output Format<a href="tel:{PHONE NUMBER}" className='rtfEmail'> {PHONE NUMBER} </a>
CreditCardDecoratorReact.Node (decoratedText: string, key: number)Output Format: <span className='rtfCreditCard'> {CREDIT CARD NUMBER} </span>
ImageDecoratorReact.Node (decoratedURL: string, key: number)Output Format: <img src="{URL OF IMAGE}" rel='noopener' className='rtfImage' />

Usage

Basic Implementation

import ReactTextFormat from 'react-text-format'; React.render( <ReactTextFormat> This is demo link http://www.google.com <br/><br/> This is demo email <span data-email="[email protected]">[email protected]</span> <br /><br /> This is demo image https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg <br /><br /> This is demo credit Card 5555555555554444 <br /><br /> This is contact Number 2125551212.In this example, we will use this for demo.<br /> This is demo phone Number 123.456.7890 <br /> This is demo phone Number (212) 555 1212 <br /> This is demo phone Number (212) 555-1212 <br /> This is demo phone Number 212-555-1212 ext. 101 <br /> This is demo phone Number 212 555 1212 x101 <br /> <br /><br /> This is an anchor <a href="http://formatter.com">http://formatter.com</a>; </ReactTextFormat>, document.body );
Output:

Generated Avatar

Advance Implementation

import ReactTextFormat from 'react-text-format'; customLinkDecorator = ( decoratedHref: string, decoratedText: string, linkTarget: string, key: number ): React.Node => { return ( <a href={decoratedHref} key={key} target={linkTarget} rel='noopener' className='customLink' > {decoratedText} </a> ) } customImageDecorator = ( decoratedURL: string, key: number ): React.Node => { return ( <div> <img src={decoratedURL} key={key} rel='noopener' width="100" className='customImage' /> </div> ) } customEmailDecorator = ( decoratedHref: string, decoratedText: string, key: number ): React.Node => { return ( <a href={decoratedHref} key={key} className='customEmail'> {decoratedText} </a> ) } customPhoneDecorator = ( decoratedText: string, key: number ): React.Node => { return ( <a href={`tel:${decoratedText}`} key={key} className='customPhone'> {decoratedText} </a> ) } customCreditCardDecorator = ( decoratedText: string, key: number ): React.Node => { return ( <i key={key} className='customCreditCard'> <b>{decoratedText}</b> </i> ) } React.render( <ReactTextFormat allowedFormats={['URL', 'Email', 'Image', 'Phone', 'CreditCard']} LinkDecorator={customLinkDecorator} EmailDecorator={customEmailDecorator} PhoneDecorator={customPhoneDecorator} CreditCardDecorator={customCreditCardDecorator} ImageDecorator={customImageDecorator} > This is demo link http://www.google.com <br/><br/> This is demo email <span data-email="ema[email protected]">[email protected]</span> <br /><br /> This is demo image https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg <br /><br /> This is demo credit Card 4111111111111111 <br /><br /> This is contact Number 2125551212.In this example, we will use this for demo.<br /> This is demo phone Number 123.456.7890 <br /> This is demo phone Number (212) 555 1212 <br /> This is demo phone Number (212) 555-1212 <br /> This is demo phone Number 212-555-1212 ext. 101 <br /> This is demo phone Number 212 555 1212 x101 <br /> <br /><br /> This is an anchor <a href="http://formatter.com">http://formatter.com</a>; </ReactTextFormat>, document.body );
Output:

react-text-format

GitHub

Recommended