@dhaiwat10/react-link-preview - npm Package Compare versions

Comparing version 1.7.1 to 1.7.2

index.esm.js

@@ -1,2 +0,2 @@
-import e,{useRef as n,useState as t,useEffect as r}from"react";import o from"react-loading-skeleton";function a(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}a("/* common */\n.Container {\n  text-align: left;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  border-radius: 7px;\n  border: 1px solid #ccc;\n  color: black;\n  transition: 0.3s all ease;\n  height: fit-content; }\n  .Container:hover {\n    background-color: #fafafa !important;\n    cursor: pointer; }\n\n.Secondary {\n  color: #646464; }\n\n.LowerContainer {\n  padding: 10px; }\n\n.Title {\n  margin-top: 0;\n  margin-bottom: 10px; }\n\n.Image {\n  width: 100%;\n  border-top-left-radius: 7px;\n  border-top-right-radius: 7px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  height: 30vh; }\n\n.SiteDetails {\n  margin-top: 10px; }\n\n/* sm */\n@media (max-width: 640px) {\n  .Description {\n    display: none; } }\n\n/* md */\n@media (min-width: 641px) and (max-width: 768px) {\n  .Description {\n    display: none; } }\n");a(".skeleton-container {\n  border-radius: 7px;\n  border: 1px solid #eee; }\n\n.skeleton-lower-container {\n  padding: 10px; }\n");var i=function(n){var t=n.width,r=void 0===t?"100%":t,a=n.imageHeight,i=void 0===a?"30vh":a,l=n.margin;return e.createElement("div",{className:"skeleton-container",style:{width:r,margin:l}},e.createElement(o,{width:r,height:i}),e.createElement("div",{className:"skeleton-lower-container"},e.createElement(o,{count:3})))},l=function(o){var a=o.url,l=o.className,c=void 0===l?"":l,d=o.width,s=o.height,m=o.descriptionLength,u=o.borderRadius,p=o.imageHeight,h=o.textAlign,g=o.margin,f=o.fallback,v=void 0===f?null:f,b=o.backgroundColor,x=void 0===b?"white":b,y=o.primaryTextColor,k=void 0===y?"black":y,w=o.secondaryTextColor,E=void 0===w?"rgb(100, 100, 100)":w,C=o.borderColor,N=void 0===C?"#ccc":C,T=o.showLoader,L=void 0===T||T,S=o.customLoader,R=void 0===S?null:S,D=n(!0),A=t(),H=A[0],I=A[1],B=t(!0),F=B[0],j=B[1];if(r((function(){return j(!0),fetch("https://rlp-proxy.herokuapp.com/v2?url="+a).then((function(e){return e.json()})).then((function(e){console.log(e),D.current&&(I(e.metadata),j(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),D.current&&(I(null),j(!1))})),function(){D.current=!1}}),[a]),F&&L)return R?e.createElement(e.Fragment,null,R):e.createElement(i,{width:d,imageHeight:p,margin:g});if(!H)return e.createElement(e.Fragment,null,v);var z=H.image,U=H.description,_=H.title,q=H.siteName,G=H.hostname;return e.createElement("div",{onClick:function(){window.open(a,"_blank")},className:"Container "+c,style:{width:d,height:s,borderRadius:u,textAlign:h,margin:g,backgroundColor:x,borderColor:N}},e.createElement("div",{style:{borderTopLeftRadius:u,borderTopRightRadius:u,backgroundImage:"url("+z+")",height:p},className:"Image"}),e.createElement("div",{className:"LowerContainer"},e.createElement("h3",{className:"Title",style:{color:k}},_),U&&e.createElement("span",{className:"Description Secondary",style:{color:E}},m&&U.length>m?U.slice(0,m)+"...":U),e.createElement("div",{className:"Secondary SiteDetails",style:{color:E}},q&&e.createElement("span",null,q," • "),e.createElement("span",null,G))))};export{l as LinkPreview};
+import e,{useRef as n,useState as t,useEffect as r}from"react";import o from"react-loading-skeleton";function a(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}a("/* common */\n.Container {\n  text-align: left;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  border-radius: 7px;\n  border: 1px solid #ccc;\n  color: black;\n  transition: 0.3s all ease;\n  height: fit-content; }\n  .Container:hover {\n    background-color: #fafafa !important;\n    cursor: pointer; }\n\n.Secondary {\n  color: #646464; }\n\n.LowerContainer {\n  padding: 10px; }\n\n.Title {\n  margin-top: 0;\n  margin-bottom: 10px; }\n\n.Image {\n  width: 100%;\n  border-top-left-radius: 7px;\n  border-top-right-radius: 7px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  height: 30vh; }\n\n.SiteDetails {\n  margin-top: 10px; }\n\n/* sm */\n@media (max-width: 640px) {\n  .Description {\n    display: none; } }\n\n/* md */\n@media (min-width: 641px) and (max-width: 768px) {\n  .Description {\n    display: none; } }\n");a(".skeleton-container {\n  border-radius: 7px;\n  border: 1px solid #eee; }\n\n.skeleton-lower-container {\n  padding: 10px; }\n");var i=function(n){var t=n.width,r=void 0===t?"100%":t,a=n.imageHeight,i=void 0===a?"30vh":a,l=n.margin;return e.createElement("div",{className:"skeleton-container",style:{width:r,margin:l}},e.createElement(o,{width:r,height:i}),e.createElement("div",{className:"skeleton-lower-container"},e.createElement(o,{count:3})))},l=function(o){var a=o.url,l=o.className,c=void 0===l?"":l,d=o.width,s=o.height,m=o.descriptionLength,u=o.borderRadius,p=o.imageHeight,h=o.textAlign,g=o.margin,f=o.fallback,v=void 0===f?null:f,b=o.backgroundColor,x=void 0===b?"white":b,y=o.primaryTextColor,k=void 0===y?"black":y,w=o.secondaryTextColor,E=void 0===w?"rgb(100, 100, 100)":w,C=o.borderColor,N=void 0===C?"#ccc":C,T=o.showLoader,L=void 0===T||T,S=o.customLoader,R=void 0===S?null:S,D=n(!0),A=t(),H=A[0],I=A[1],B=t(!0),F=B[0],j=B[1];if(r((function(){return D.current=!0,j(!0),fetch("https://rlp-proxy.herokuapp.com/v2?url="+a).then((function(e){return e.json()})).then((function(e){D.current&&(I(e.metadata),j(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),D.current&&(I(null),j(!1))})),function(){D.current=!1}}),[a]),F&&L)return R?e.createElement(e.Fragment,null,R):e.createElement(i,{width:d,imageHeight:p,margin:g});if(!H)return e.createElement(e.Fragment,null,v);var z=H.image,U=H.description,_=H.title,q=H.siteName,G=H.hostname;return e.createElement("div",{onClick:function(){window.open(a,"_blank")},className:"Container "+c,style:{width:d,height:s,borderRadius:u,textAlign:h,margin:g,backgroundColor:x,borderColor:N}},e.createElement("div",{"data-testid":"image-container",style:{borderTopLeftRadius:u,borderTopRightRadius:u,backgroundImage:"url("+z+")",height:p},className:"Image"}),e.createElement("div",{className:"LowerContainer"},e.createElement("h3",{className:"Title",style:{color:k}},_),U&&e.createElement("span",{className:"Description Secondary",style:{color:E}},m&&U.length>m?U.slice(0,m)+"...":U),e.createElement("div",{className:"Secondary SiteDetails",style:{color:E}},q&&e.createElement("span",null,q," • "),e.createElement("span",null,G))))};export{l as LinkPreview};
 //# sourceMappingURL=index.esm.js.map

index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-loading-skeleton");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),a=n(t);function o(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}o("/* common */\n.Container {\n  text-align: left;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  border-radius: 7px;\n  border: 1px solid #ccc;\n  color: black;\n  transition: 0.3s all ease;\n  height: fit-content; }\n  .Container:hover {\n    background-color: #fafafa !important;\n    cursor: pointer; }\n\n.Secondary {\n  color: #646464; }\n\n.LowerContainer {\n  padding: 10px; }\n\n.Title {\n  margin-top: 0;\n  margin-bottom: 10px; }\n\n.Image {\n  width: 100%;\n  border-top-left-radius: 7px;\n  border-top-right-radius: 7px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  height: 30vh; }\n\n.SiteDetails {\n  margin-top: 10px; }\n\n/* sm */\n@media (max-width: 640px) {\n  .Description {\n    display: none; } }\n\n/* md */\n@media (min-width: 641px) and (max-width: 768px) {\n  .Description {\n    display: none; } }\n");o(".skeleton-container {\n  border-radius: 7px;\n  border: 1px solid #eee; }\n\n.skeleton-lower-container {\n  padding: 10px; }\n");var i=function(e){var t=e.width,n=void 0===t?"100%":t,o=e.imageHeight,i=void 0===o?"30vh":o,l=e.margin;return r.default.createElement("div",{className:"skeleton-container",style:{width:n,margin:l}},r.default.createElement(a.default,{width:n,height:i}),r.default.createElement("div",{className:"skeleton-lower-container"},r.default.createElement(a.default,{count:3})))};exports.LinkPreview=function(t){var n=t.url,a=t.className,o=void 0===a?"":a,l=t.width,d=t.height,c=t.descriptionLength,s=t.borderRadius,u=t.imageHeight,m=t.textAlign,f=t.margin,p=t.fallback,h=void 0===p?null:p,g=t.backgroundColor,v=void 0===g?"white":g,b=t.primaryTextColor,x=void 0===b?"black":b,y=t.secondaryTextColor,k=void 0===y?"rgb(100, 100, 100)":y,w=t.borderColor,E=void 0===w?"#ccc":w,C=t.showLoader,N=void 0===C||C,S=t.customLoader,T=void 0===S?null:S,L=e.useRef(!0),R=e.useState(),D=R[0],j=R[1],A=e.useState(!0),H=A[0],I=A[1];if(e.useEffect((function(){return I(!0),fetch("https://rlp-proxy.herokuapp.com/v2?url="+n).then((function(e){return e.json()})).then((function(e){console.log(e),L.current&&(j(e.metadata),I(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),L.current&&(j(null),I(!1))})),function(){L.current=!1}}),[n]),H&&N)return T?r.default.createElement(r.default.Fragment,null,T):r.default.createElement(i,{width:l,imageHeight:u,margin:f});if(!D)return r.default.createElement(r.default.Fragment,null,h);var _=D.image,q=D.description,B=D.title,F=D.siteName,P=D.hostname;return r.default.createElement("div",{onClick:function(){window.open(n,"_blank")},className:"Container "+o,style:{width:l,height:d,borderRadius:s,textAlign:m,margin:f,backgroundColor:v,borderColor:E}},r.default.createElement("div",{style:{borderTopLeftRadius:s,borderTopRightRadius:s,backgroundImage:"url("+_+")",height:u},className:"Image"}),r.default.createElement("div",{className:"LowerContainer"},r.default.createElement("h3",{className:"Title",style:{color:x}},B),q&&r.default.createElement("span",{className:"Description Secondary",style:{color:k}},c&&q.length>c?q.slice(0,c)+"...":q),r.default.createElement("div",{className:"Secondary SiteDetails",style:{color:k}},F&&r.default.createElement("span",null,F," • "),r.default.createElement("span",null,P))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-loading-skeleton");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),a=n(t);function o(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}o("/* common */\n.Container {\n  text-align: left;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  border-radius: 7px;\n  border: 1px solid #ccc;\n  color: black;\n  transition: 0.3s all ease;\n  height: fit-content; }\n  .Container:hover {\n    background-color: #fafafa !important;\n    cursor: pointer; }\n\n.Secondary {\n  color: #646464; }\n\n.LowerContainer {\n  padding: 10px; }\n\n.Title {\n  margin-top: 0;\n  margin-bottom: 10px; }\n\n.Image {\n  width: 100%;\n  border-top-left-radius: 7px;\n  border-top-right-radius: 7px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  height: 30vh; }\n\n.SiteDetails {\n  margin-top: 10px; }\n\n/* sm */\n@media (max-width: 640px) {\n  .Description {\n    display: none; } }\n\n/* md */\n@media (min-width: 641px) and (max-width: 768px) {\n  .Description {\n    display: none; } }\n");o(".skeleton-container {\n  border-radius: 7px;\n  border: 1px solid #eee; }\n\n.skeleton-lower-container {\n  padding: 10px; }\n");var i=function(e){var t=e.width,n=void 0===t?"100%":t,o=e.imageHeight,i=void 0===o?"30vh":o,l=e.margin;return r.default.createElement("div",{className:"skeleton-container",style:{width:n,margin:l}},r.default.createElement(a.default,{width:n,height:i}),r.default.createElement("div",{className:"skeleton-lower-container"},r.default.createElement(a.default,{count:3})))};exports.LinkPreview=function(t){var n=t.url,a=t.className,o=void 0===a?"":a,l=t.width,d=t.height,c=t.descriptionLength,s=t.borderRadius,u=t.imageHeight,m=t.textAlign,f=t.margin,p=t.fallback,h=void 0===p?null:p,g=t.backgroundColor,v=void 0===g?"white":g,b=t.primaryTextColor,x=void 0===b?"black":b,y=t.secondaryTextColor,k=void 0===y?"rgb(100, 100, 100)":y,w=t.borderColor,E=void 0===w?"#ccc":w,C=t.showLoader,N=void 0===C||C,S=t.customLoader,T=void 0===S?null:S,L=e.useRef(!0),R=e.useState(),D=R[0],j=R[1],A=e.useState(!0),H=A[0],I=A[1];if(e.useEffect((function(){return L.current=!0,I(!0),fetch("https://rlp-proxy.herokuapp.com/v2?url="+n).then((function(e){return e.json()})).then((function(e){L.current&&(j(e.metadata),I(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),L.current&&(j(null),I(!1))})),function(){L.current=!1}}),[n]),H&&N)return T?r.default.createElement(r.default.Fragment,null,T):r.default.createElement(i,{width:l,imageHeight:u,margin:f});if(!D)return r.default.createElement(r.default.Fragment,null,h);var _=D.image,q=D.description,B=D.title,F=D.siteName,P=D.hostname;return r.default.createElement("div",{onClick:function(){window.open(n,"_blank")},className:"Container "+o,style:{width:l,height:d,borderRadius:s,textAlign:m,margin:f,backgroundColor:v,borderColor:E}},r.default.createElement("div",{"data-testid":"image-container",style:{borderTopLeftRadius:s,borderTopRightRadius:s,backgroundImage:"url("+_+")",height:u},className:"Image"}),r.default.createElement("div",{className:"LowerContainer"},r.default.createElement("h3",{className:"Title",style:{color:x}},B),q&&r.default.createElement("span",{className:"Description Secondary",style:{color:k}},c&&q.length>c?q.slice(0,c)+"...":q),r.default.createElement("div",{className:"Secondary SiteDetails",style:{color:k}},F&&r.default.createElement("span",null,F," • "),r.default.createElement("span",null,P))))};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@dhaiwat10/react-link-preview",
   "license": "MIT",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "private": false,
@@ -6,0 +6,0 @@ "description": "React library to preview links.",

README.md

 # React Link Preview
 
-A React component that renders beautiful link previews.
+A React component that renders beautiful, fully-customizable link previews.
 
@@ -9,7 +9,6 @@ <img src='https://img.shields.io/npm/dt/@dhaiwat10/react-link-preview' />
 
-**Note**: This package is stil in its early days. Functionality might not be as expected.
-
 ## How to use
 
-Install the package:
+**Install the package:**
+
 `yarn add @dhaiwat10/react-link-preview`
@@ -19,3 +18,3 @@
 
-Import and render the preview:
+**Import and render the preview:**
 
@@ -26,8 +25,14 @@ ```js
 const Home = () => {
-  return <LinkPreview url='https://www.youtube.com/watch?v=dQw4w9WgXcQ' />;
+  return <LinkPreview url='https://www.youtube.com/watch?v=dQw4w9WgXcQ' width='400px' />;
 };
 ```
 
-If the component renders nothing, it means that no metadata could be scraped for the URL.
+If the component renders nothing, it means that no metadata could be scraped for the URL. Provide a `fallback` component if you don't want to render `null`.
 
+## Important
+
+This package uses a Heroku proxy to get around CORS issues. Feel free to go through the source code of the proxy <a href="https://github.com/dhaiwat10/rlp-proxy">here</a>.
+
+I highly recommend forking both this repo and the proxy repo, and deploying your own copy of the project if you plan to use this package in a production app.
+
 ## API (Available props)
@@ -37,34 +42,97 @@
 
-`url`: string
+### `url` (string)
 
-`fallback?`: JSX.Element (Any valid JSX)
+The URL for which you want to generate the link preview.
 
-`showLoader?`: boolean
+<hr />
 
-`customLoader?`: JSX.Element (Any valid JSX)
+### `fallback` (JSX.Element / any valid JSX)
 
-`backgroundColor?`: string
+A fallback component which will be rendered if a link preview could not be generated.
 
-`primaryTextColor?`: string
+<hr />
 
-`secondaryTextColor?`: string
+### `showLoader` (boolean)
 
-`borderColor?`: string
+Whether you want to display the default loading skeleton or not.
 
-`className?`: string
+<hr />
 
-`width?`: string or number
+### `customLoader` (JSX.Element / any valid JSX)
 
-`height?`: string or number
+Custom loader that will be displayed in place of the default loader.
 
-`margin?`: string or number
+<hr />
 
-`descriptionLength?`: number
+### `backgroundColor` (string)
 
-`borderRadius?`: string or number
+Background color of the card.
 
-`imageHeight?`: string or number
+<hr />
 
-`textAlign?`: _left_, _right_ or _center_
+### `primaryTextColor` (string)
 
+Color of the primary text (title).
+
+<hr />
+
+### `secondaryTextColor` (string)
+
+Color of the secondary text (description, URL, domain name).
+
+<hr />
+
+### `borderColor` (string)
+
+Color of the border of the card.
+
+<hr />
+
+### `className` (string)
+
+Any custom CSS class that you want to apply to the card.
+
+<hr />
+
+### `width` (string or number)
+
+Width of the card.
+
+<hr />
+
+### `height` (string or number)
+
+Height of the card.
+
+<hr />
+
+### `margin` (string or number)
+
+Margin around the card.
+
+<hr />
+
+### `descriptionLength` (number)
+
+Length of the description in the card. (number of characters)
+
+<hr />
+
+### `borderRadius` (string or number)
+
+Border radius of the card.
+<hr />
+
+### `imageHeight` (string or number)
+
+Height of the image.
+
+<hr />
+
+### `textAlign` ( _left_, _right_ or _center_)
+
+Alignment of the text.
+
+<hr />
+
 Props marked with **?** are **optional**.

No alert changes

Improved metrics

Total package byte prevSize

29328

increased by5.02%

Number of lines in readme file

135

increased by101.49%

No dependency changes