react-linkify-all - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

package.json

 {
   "name": "react-linkify-all",
-  "version": "1.2.0",
-  "description": "NPM package that makes links clickable in the text. Any pattern is also supported to highlight. Text with links turns into an array of React components. Customizable. Built-in support of emails, Telegram, Twitter links. Own patterns and components can be used to linkify everything!",
+  "version": "1.3.0",
+  "description": "Modal pop up on hover, clickable links in text - all is here. This is NPM package that converts text with links into an array of React components. Customizable. Built-in support of emails, Telegram, Twitter mentions. Own pattern can be used to linkify everything",
   "author": "suvmer, https://github.com/suvmer",
@@ -22,3 +22,7 @@ "license": "MIT",
     "email",
-    "regex"
+    "regex",
+    "modal",
+    "popup",
+    "pop-up",
+    "hover"
   ],
@@ -25,0 +29,0 @@ "scripts": {

README.md

 # react-linkify-all
-NPM package that converts text with links to array of React components. Customizable. Built-in support of emails, Telegram, Twitter links. Own pattern can be used to linkify everything!
+- [Preview](#preview)
+- [Description](#description)
+- [Installation](#installation)
+- [Basic Usage](#basic-usage)
+- [Own components and patterns](#own-components-and-patterns)
+- [Example with linkify() method](#example-with-linkify-method)
 
+## Preview
+Try it on CodeSandBox: https://codesandbox.io/s/compassionate-meitner-y8d9l9
+
+Popup functionality:
+![](linkify_fetch.gif)
+
+Code:
+![](linkify_fetch.png)
+
+![](linkify_fetch_1.png)
+
+## Description
+
+Modal pop up on hover, clickable links in text - all is here. This is NPM package that converts text with links into an array of React components. Customizable. Built-in support of emails, Telegram, Twitter mentions. Modal pop up can be implemented as it shown above. Own pattern can be used to linkify everything
+
 ## Installation
@@ -14,10 +34,17 @@ ```sh
 ```
-Props "twitters", "emails" could be added optionally.
+Props like "twitters", "emails" could be added optionally.
 
-You can also use React components(\<Emails/\>, \<Twitters/\>, \<Tgs\/>, ...) and linkify() method.
+You can also use \<Emails/\>, \<Twitters/\>, \<Tgs\/>, ... and method linkify() to linkify.
 
-### Example for react components:
+### Example with react components:
+![](linkify_links.gif)
+
+Code:
 ![](linkify.png)
-**Nesting is not supported yet:** use <Linkify .../> to summarize effects
 
+Result HTML:
+![](linkify_1.png)
+
+**Nesting is not supported yet:** use <Linkify links twitters emails.../> to summarize effects
+
 ## Own components and patterns
@@ -34,11 +61,12 @@ You could use your own component for links:
 Parameters "match" and "link" may differ.
-Example #1:
+
+**Example #1:**
 ```jsx
 <Links>site.com</Links>
 ```
-match: site.com
-i: 1
-link: https://site.com
+match: site.com  
+link: https://site.com  
+i: 1  
 
-### Own patterns
+### Creating own patterns
 Every pattern for linkify is set by an object:
@@ -59,7 +87,7 @@ ```jsx
 "linkFn" is a function for converting a match into a link.
-In Example #1 above, linkFn is:
+In **Example #1** above, linkFn is:
 ```js
 const example = match => match.substring(0, 4) === 'http' ? match : 'https://'+match
 ```
-It is used to handle matches like site.com and https://site.com
+(It is used to handle matches like site.com and https://site.com)
 ### Using own patterns
@@ -75,3 +103,3 @@ ```jsx
 ```
-That example will wrap every Twitter profile mention into <a\> tag.
+This example will wrap every Twitter profile mention into <a\/\> tag.
 
@@ -86,3 +114,3 @@ Also, you can combine options:
 
-## linkify() function usage example
+## Example with linkify() method
 ```jsx
@@ -89,0 +117,0 @@ import { linkify } from 'react-linkify-all';

No alert changes

Improved metrics

Total package byte prevSize

352323

87.55%

Number of package files

13

62.5%

Number of lines in readme file

119

30.77%

Worsened metrics

Lines of code

238

-2.06%

No dependency changes