react-text-format - npm Package Compare versions

Comparing version 0.0.86 to 0.0.87

package.json

 {
   "name": "react-text-format",
-  "version": "0.0.86",
+  "version": "0.0.87",
   "description": "React Component to find and format links, emails, phone numbers and credit cards to required format.",
@@ -5,0 +5,0 @@ "author": "Ahsan Bilal",

README.md

@@ -7,26 +7,170 @@ # react-text-format
 
-## Install
 
-```bash
-npm install --save react-text-format
+## Installation
+
 ```
+yarn add react-text-format
+```
 
+or
+
+```
+npm install react-text-format --save
+```
+
 ## Usage
 
-```jsx
-import React, { Component } from 'react'
+### Basic
 
-import MyComponent from 'react-text-format'
+Any link that appears inside the `ReactTextFormat` component will become clickable.
 
-class Example extends Component {
-  render () {
+```
+<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>Visit our site http://reactninja.com</div>
+    <div>React component to parse links urls, emails, credit cards,
+    phone in text into required format</div>
+    <footer>Shoot Us a message at : [e-mail]</footer>
+</ReactTextFormat>
+```
+
+##### Renders to:
+
+Visit our site [reactninja.com](http://www.reactninja.com)
+
+React component to parse links urls, emails, credit cards, phone in text into required format
+
+Shoot Us a message at [[e-mail]](mailto:[e-mail])
+
+
+## Props
+
+**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
+
+``['URL', 'Email', 'Phone']``
+
+react-text-format allows the following formats
+
+``['URL', 'Email', 'Phone', 'CreditCard']``
+
+```js
+import ReactTextFormat from 'react-text-format';
+
+React.render(
+    <ReactTextFormat allowedFormats={['URL', 'Phone']}>
+        We need your feedback at http://www.google.com.
+    </ReactTextFormat>,
+  document.body
+);
+```
+
+
+**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.
+
+```js
+import ReactTextFormat from 'react-text-format';
+
+customLinkDecorator = (href, text, linkTarget, key) => {
     return (
-      <MyComponent />
-    )
-  }
-}
+      <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
+);
 ```
 
-## License
+**EmailDecorator**
+```js
+import ReactTextFormat from 'react-text-format';
 
-MIT © [react-ninja](https://github.com/react-ninja)
+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**
+```js
+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**
+
+```js
+import ReactTextFormat from 'react-text-format';
+
+customCreditCardDecorator = (text, key) => {
+    return (
+      <span
+        key={key}
+        className="customCreditCardStyle"
+        onClick={() => {
+          console.log('Clicked on Credit Card Component');
+        }}
+      >
+        {text}
+      </span>
+    );
+  };
+
+React.render(
+    <ReactTextFormat CreditCardDecorator={customCreditCardDecorator}>
+        We need your feedback at [e-mail].
+    </ReactTextFormat>,
+  document.body
+);
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package 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

2845324

increased by0.12%

Number of lines in readme file

176

increased by450%

Number of medium supply chain risk alerts

4

decreased by-20%

No dependency changes