New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-text-format
Advanced tools
react-text-format - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
| { | ||
| "name": "react-text-format", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "React Component to find and format links, emails, phone numbers and credit cards to required format.", | ||
@@ -5,0 +5,0 @@ "author": "Ahsan Bilal", |
202
README.md
@@ -58,11 +58,13 @@ # react-text-format | ||
| **allowedFormats** (Array) | ||
| The allowedFormats attribute specifies the allowed formats which will be allowed to format through react-text-format. Default prop values of allowedFormats are | ||
| |Name | Type | Default | | ||
| |---|---|---| | ||
| |allowedFormats| Array ``['URL', 'Email', 'Image', 'Phone', 'CreditCard']``| ``['URL', 'Email', 'Phone']`` | | ||
| |linkTarget| String (_blank \| _self \| _parent \| _top \| framename) | ``_self`` | | ||
| |LinkDecorator| React.Node (decoratedHref: string, decoratedText: string, linkTarget: string, key: number) | Output Format: ``<a href="{URL}" target="{target}" rel='noopener' className='rtfLink'> <URL> </a>`` | ||
| |EmailDecorator| React.Node (decoratedHref: string, decoratedText: string,key: number) | Output Format:``<a href="mailto: {EMAIL ADDRESS}" className='rtfEmail'> {EMAIL ADDRESS} </a>`` | | ||
| |PhoneDecorator| React.Node (decoratedText: string, key: number) | Output Format``<a href="tel:{PHONE NUMBER}" className='rtfEmail'> {PHONE NUMBER} </a>`` | | ||
| |CreditCardDecorator| React.Node (decoratedText: string, key: number) | Output Format: ``<span className='rtfCreditCard'> {CREDIT CARD NUMBER} </span>`` | | ||
| |ImageDecorator| React.Node (decoratedURL: string, key: number) | Output Format: ``<img src="{URL OF IMAGE}" rel='noopener' className='rtfImage' />`` | | ||
| ``['URL', 'Email', 'Phone']`` | ||
| react-text-format allows the following formats | ||
| ``['URL', 'Email', 'Image', 'Phone', 'CreditCard']`` | ||
| ### Basic Implementation | ||
| ```js | ||
@@ -72,4 +74,14 @@ import ReactTextFormat from 'react-text-format'; | ||
| React.render( | ||
| <ReactTextFormat allowedFormats={['URL', 'Phone']}> | ||
| We need your feedback at http://www.google.com. | ||
| <ReactTextFormat> | ||
| This is demo link http://www.google.com | ||
| <br/><br/> | ||
| This is demo email <span data-email="email@span.com">jago@yahoo.com</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 demo phone Number 123.456.7890 | ||
| <br /><br /> | ||
| This is an anchor <a href="http://formatter.com">http://formatter.com</a>; | ||
| </ReactTextFormat>, | ||
@@ -79,120 +91,100 @@ document.body | ||
| ``` | ||
| ###### Output: | ||
|  | ||
| **LinkTarget** (string) | ||
| The LinkTarget 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. | ||
| ### Advance Implementation | ||
| ```js | ||
| import ReactTextFormat from 'react-text-format'; | ||
| customLinkDecorator = (href, text, linkTarget, key) => { | ||
| customLinkDecorator = ( | ||
| decoratedHref: string, | ||
| decoratedText: string, | ||
| linkTarget: string, | ||
| key: number | ||
| ): React.Node => { | ||
| return ( | ||
| <a | ||
| href={href} | ||
| href={decoratedHref} | ||
| key={key} | ||
| target={linkTarget} | ||
| rel="noopener" | ||
| className="customLinkStyle" | ||
| rel='noopener' | ||
| className='customLink' | ||
| > | ||
| {text} | ||
| {decoratedText} | ||
| </a> | ||
| ); | ||
| }; | ||
| ) | ||
| } | ||
| React.render( | ||
| <ReactTextFormat LinkDecorator={customLinkDecorator}> | ||
| We need your feedback at reacttextformat@gmail.com. | ||
| </ReactTextFormat>, | ||
| document.body | ||
| ); | ||
| ``` | ||
| customImageDecorator = ( | ||
| decoratedURL: string, | ||
| key: number | ||
| ): React.Node => { | ||
| return ( | ||
| <div> | ||
| <img src={decoratedURL} key={key} rel='noopener' width="100" className='customImage' /> | ||
| </div> | ||
| ) | ||
| } | ||
| **EmailDecorator** | ||
| ```js | ||
| import ReactTextFormat from 'react-text-format'; | ||
| customEmailDecorator = (href, text, key) => { | ||
| customEmailDecorator = ( | ||
| decoratedHref: string, | ||
| decoratedText: string, | ||
| key: number | ||
| ): React.Node => { | ||
| return ( | ||
| <a href={href} key={key} className="customEmailStyle"> | ||
| {text} | ||
| <a href={decoratedHref} key={key} className='customEmail'> | ||
| {decoratedText} | ||
| </a> | ||
| ); | ||
| }; | ||
| ) | ||
| } | ||
| React.render( | ||
| <ReactTextFormat EmailDecorator={customEmailDecorator}> | ||
| We need your feedback at reacttextformat@gmail.com. | ||
| </ReactTextFormat>, | ||
| document.body | ||
| ); | ||
| ``` | ||
| **ImageDecorator** | ||
| ```js | ||
| import ReactTextFormat from 'react-text-format'; | ||
| customImageDecorator = (url, key) => { | ||
| return <img src={url} className="customImageStyle" />; | ||
| }; | ||
| React.render( | ||
| <ReactTextFormat | ||
| allowedFormats={['Image']} | ||
| ImageDecorator={customImageDecorator}> | ||
| We need your feedback at reacttextformat@gmail.com. | ||
| https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg | ||
| </ReactTextFormat>, | ||
| document.body | ||
| ); | ||
| ``` | ||
| **PhoneDecorator** | ||
| ```js | ||
| import ReactTextFormat from 'react-text-format'; | ||
| customPhoneDecorator = (text, key) => { | ||
| customPhoneDecorator = ( | ||
| decoratedText: string, | ||
| key: number | ||
| ): React.Node => { | ||
| return ( | ||
| <a href={`tel:${text}`} key={key} className="customPhoneStyle"> | ||
| <i className="fa fa-phone" /> {text} | ||
| <a href={`tel:${decoratedText}`} key={key} className='customPhone'> | ||
| {decoratedText} | ||
| </a> | ||
| ); | ||
| }; | ||
| ) | ||
| } | ||
| React.render( | ||
| <ReactTextFormat PhoneDecorator={customPhoneDecorator}> | ||
| We need your feedback at reacttextformat@gmail.com. | ||
| </ReactTextFormat>, | ||
| document.body | ||
| ); | ||
| ``` | ||
| **CreditCardDecorator** | ||
| ```js | ||
| import ReactTextFormat from 'react-text-format'; | ||
| customCreditCardDecorator = (text, key) => { | ||
| customCreditCardDecorator = ( | ||
| decoratedText: string, | ||
| key: number | ||
| ): React.Node => { | ||
| return ( | ||
| <span | ||
| key={key} | ||
| className="customCreditCardStyle" | ||
| onClick={() => { | ||
| console.log('Clicked on Credit Card Component'); | ||
| }} | ||
| > | ||
| {text} | ||
| </span> | ||
| ); | ||
| }; | ||
| <i key={key} className='customCreditCard'> | ||
| <b>{decoratedText}</b> | ||
| </i> | ||
| ) | ||
| } | ||
| React.render( | ||
| <ReactTextFormat CreditCardDecorator={customCreditCardDecorator}> | ||
| We need your feedback at reacttextformat@gmail.com. | ||
| </ReactTextFormat>, | ||
| document.body | ||
| <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="email@span.com">jago@yahoo.com</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 demo phone Number 123.456.7890 | ||
| <br /><br /> | ||
| This is an anchor <a href="http://formatter.com">http://formatter.com</a>; | ||
| </ReactTextFormat>, | ||
| document.body | ||
| ); | ||
| ``` | ||
| ###### Output: | ||
|  |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.04%
2851048
- Number of medium supply chain risk alerts
- decreased by-20%
4
Worsened metrics
- Number of lines in readme file
- decreased by-4.08%
188
No dependency changes