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

Comparing version 1.11.0 to 1.12.0

components/LinkPreview/LinkPreview.d.ts

@@ -24,2 +24,3 @@ import React from 'react';
     fallbackImageSrc?: string;
+    explicitImageSrc?: string;
 }
@@ -26,0 +27,0 @@ export interface APIResponse {

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="https://raw.githubusercontent.com/Dhaiwat10/react-link-preview/master/src/assets/img-placeholder.jpg";var c=function(o){var a=o.url,c=o.className,d=void 0===c?"":c,s=o.width,m=o.height,u=o.descriptionLength,h=o.borderRadius,p=o.imageHeight,g=o.textAlign,f=o.margin,v=o.fallback,b=void 0===v?null:v,x=o.backgroundColor,w=void 0===x?"white":x,k=o.primaryTextColor,y=void 0===k?"black":k,E=o.secondaryTextColor,N=void 0===E?"rgb(100, 100, 100)":E,C=o.borderColor,T=void 0===C?"#ccc":C,L=o.showLoader,S=void 0===L||L,R=o.customLoader,D=void 0===R?null:R,I=o.openInNewTab,A=void 0===I||I,H=o.fetcher,j=o.fallbackImageSrc,B=void 0===j?l:j,F=n(!0),U=t(),_=U[0],z=U[1],W=t(!0),q=W[0],G=W[1];if(r((function(){return F.current=!0,G(!0),H?H(a).then((function(e){F.current&&(!function(e){return!!e&&null!==e.title&&null!==e.description&&null!==e.image&&null!==e.siteName&&null!==e.hostname&&void 0!==e.title&&void 0!==e.description&&void 0!==e.image&&void 0!==e.siteName&&void 0!==e.hostname&&"null"!==e.image&&!e.image.startsWith("/")}(e)?z(null):z(e),G(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),F.current&&(z(null),G(!1))})):fetch("https://rlp-proxy.herokuapp.com/v2?url="+a).then((function(e){return e.json()})).then((function(e){F.current&&(z(e.metadata),G(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),F.current&&(z(null),G(!1))})),function(){F.current=!1}}),[a,H]),q&&S)return D?e.createElement(e.Fragment,null,D):e.createElement(i,{width:s,imageHeight:p,margin:f});if(!_)return e.createElement(e.Fragment,null,b);var J=_.image,K=_.description,M=_.title,O=_.siteName,P=_.hostname;return e.createElement("div",{"data-testid":"container",onClick:function(){var e=A?"_blank":"_self";window.open(a,e)},className:"Container "+d,style:{width:s,height:m,borderRadius:h,textAlign:g,margin:f,backgroundColor:w,borderColor:T}},e.createElement("div",{"data-testid":"image-container",style:{borderTopLeftRadius:h,borderTopRightRadius:h,backgroundImage:"url("+(J||B)+"), url("+B+")",height:p},className:"Image"}),e.createElement("div",{className:"LowerContainer"},e.createElement("h3",{"data-testid":"title",className:"Title",style:{color:y}},M),K&&e.createElement("span",{"data-testid":"desc",className:"Description Secondary",style:{color:N}},u&&K.length>u?K.slice(0,u)+"...":K),e.createElement("div",{className:"Secondary SiteDetails",style:{color:N}},O&&e.createElement("span",null,O," • "),e.createElement("span",null,P))))};export{c as LinkPreview,l as placeholderImg};
+import e,{useRef as n,useState as t,useEffect as r}from"react";import o from"react-loading-skeleton";function i(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))}}i("/* 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");i(".skeleton-container {\n  border-radius: 7px;\n  border: 1px solid #eee; }\n\n.skeleton-lower-container {\n  padding: 10px; }\n");var a=function(n){var t=n.width,r=void 0===t?"100%":t,i=n.imageHeight,a=void 0===i?"30vh":i,l=n.margin;return e.createElement("div",{className:"skeleton-container",style:{width:r,margin:l}},e.createElement(o,{width:r,height:a}),e.createElement("div",{className:"skeleton-lower-container"},e.createElement(o,{count:3})))},l="https://raw.githubusercontent.com/Dhaiwat10/react-link-preview/master/src/assets/img-placeholder.jpg";var c=function(o){var i=o.url,c=o.className,d=void 0===c?"":c,s=o.width,m=o.height,u=o.descriptionLength,h=o.borderRadius,p=o.imageHeight,g=o.textAlign,v=o.margin,f=o.fallback,b=void 0===f?null:f,x=o.backgroundColor,w=void 0===x?"white":x,k=o.primaryTextColor,y=void 0===k?"black":k,E=o.secondaryTextColor,N=void 0===E?"rgb(100, 100, 100)":E,C=o.borderColor,T=void 0===C?"#ccc":C,S=o.showLoader,L=void 0===S||S,R=o.customLoader,D=void 0===R?null:R,I=o.openInNewTab,A=void 0===I||I,H=o.fetcher,j=o.fallbackImageSrc,B=void 0===j?l:j,F=o.explicitImageSrc,U=void 0===F?null:F,_=n(!0),z=t(),W=z[0],q=z[1],G=t(!0),J=G[0],K=G[1];if(r((function(){return _.current=!0,K(!0),H?H(i).then((function(e){_.current&&(!function(e){return!!e&&null!==e.title&&null!==e.description&&null!==e.image&&null!==e.siteName&&null!==e.hostname&&void 0!==e.title&&void 0!==e.description&&void 0!==e.image&&void 0!==e.siteName&&void 0!==e.hostname&&"null"!==e.image&&!e.image.startsWith("/")}(e)?q(null):q(e),K(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),_.current&&(q(null),K(!1))})):fetch("https://rlp-proxy.herokuapp.com/v2?url="+i).then((function(e){return e.json()})).then((function(e){_.current&&(q(e.metadata),K(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),_.current&&(q(null),K(!1))})),function(){_.current=!1}}),[i,H]),J&&L)return D?e.createElement(e.Fragment,null,D):e.createElement(a,{width:s,imageHeight:p,margin:v});if(!W)return e.createElement(e.Fragment,null,b);var M=W.image,O=W.description,P=W.title,Q=W.siteName,V=W.hostname;return e.createElement("div",{"data-testid":"container",onClick:function(){var e=A?"_blank":"_self";window.open(i,e)},className:"Container "+d,style:{width:s,height:m,borderRadius:h,textAlign:g,margin:v,backgroundColor:w,borderColor:T}},e.createElement("div",{"data-testid":"image-container",style:{borderTopLeftRadius:h,borderTopRightRadius:h,backgroundImage:"url("+(U||M||B)+"), url("+B+")",height:p},className:"Image"}),e.createElement("div",{className:"LowerContainer"},e.createElement("h3",{"data-testid":"title",className:"Title",style:{color:y}},P),O&&e.createElement("span",{"data-testid":"desc",className:"Description Secondary",style:{color:N}},u&&O.length>u?O.slice(0,u)+"...":O),e.createElement("div",{className:"Secondary SiteDetails",style:{color:N}},Q&&e.createElement("span",null,Q," • "),e.createElement("span",null,V))))};export{c as LinkPreview,l as placeholderImg};
 //# 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})))},l="https://raw.githubusercontent.com/Dhaiwat10/react-link-preview/master/src/assets/img-placeholder.jpg";exports.LinkPreview=function(t){var n=t.url,a=t.className,o=void 0===a?"":a,d=t.width,c=t.height,s=t.descriptionLength,u=t.borderRadius,m=t.imageHeight,f=t.textAlign,h=t.margin,p=t.fallback,g=void 0===p?null:p,v=t.backgroundColor,b=void 0===v?"white":v,x=t.primaryTextColor,w=void 0===x?"black":x,y=t.secondaryTextColor,k=void 0===y?"rgb(100, 100, 100)":y,E=t.borderColor,N=void 0===E?"#ccc":E,C=t.showLoader,S=void 0===C||C,T=t.customLoader,L=void 0===T?null:T,R=t.openInNewTab,D=void 0===R||R,I=t.fetcher,j=t.fallbackImageSrc,_=void 0===j?l:j,A=e.useRef(!0),H=e.useState(),q=H[0],B=H[1],F=e.useState(!0),P=F[0],U=F[1];if(e.useEffect((function(){return A.current=!0,U(!0),I?I(n).then((function(e){A.current&&(!function(e){return!!e&&null!==e.title&&null!==e.description&&null!==e.image&&null!==e.siteName&&null!==e.hostname&&void 0!==e.title&&void 0!==e.description&&void 0!==e.image&&void 0!==e.siteName&&void 0!==e.hostname&&"null"!==e.image&&!e.image.startsWith("/")}(e)?B(null):B(e),U(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),A.current&&(B(null),U(!1))})):fetch("https://rlp-proxy.herokuapp.com/v2?url="+n).then((function(e){return e.json()})).then((function(e){A.current&&(B(e.metadata),U(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),A.current&&(B(null),U(!1))})),function(){A.current=!1}}),[n,I]),P&&S)return L?r.default.createElement(r.default.Fragment,null,L):r.default.createElement(i,{width:d,imageHeight:m,margin:h});if(!q)return r.default.createElement(r.default.Fragment,null,g);var z=q.image,M=q.description,O=q.title,W=q.siteName,G=q.hostname;return r.default.createElement("div",{"data-testid":"container",onClick:function(){var e=D?"_blank":"_self";window.open(n,e)},className:"Container "+o,style:{width:d,height:c,borderRadius:u,textAlign:f,margin:h,backgroundColor:b,borderColor:N}},r.default.createElement("div",{"data-testid":"image-container",style:{borderTopLeftRadius:u,borderTopRightRadius:u,backgroundImage:"url("+(z||_)+"), url("+_+")",height:m},className:"Image"}),r.default.createElement("div",{className:"LowerContainer"},r.default.createElement("h3",{"data-testid":"title",className:"Title",style:{color:w}},O),M&&r.default.createElement("span",{"data-testid":"desc",className:"Description Secondary",style:{color:k}},s&&M.length>s?M.slice(0,s)+"...":M),r.default.createElement("div",{className:"Secondary SiteDetails",style:{color:k}},W&&r.default.createElement("span",null,W," • "),r.default.createElement("span",null,G))))},exports.placeholderImg=l;
+"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})))},l="https://raw.githubusercontent.com/Dhaiwat10/react-link-preview/master/src/assets/img-placeholder.jpg";exports.LinkPreview=function(t){var n=t.url,a=t.className,o=void 0===a?"":a,d=t.width,c=t.height,s=t.descriptionLength,u=t.borderRadius,m=t.imageHeight,f=t.textAlign,p=t.margin,h=t.fallback,g=void 0===h?null:h,v=t.backgroundColor,b=void 0===v?"white":v,x=t.primaryTextColor,w=void 0===x?"black":x,y=t.secondaryTextColor,k=void 0===y?"rgb(100, 100, 100)":y,E=t.borderColor,N=void 0===E?"#ccc":E,C=t.showLoader,S=void 0===C||C,T=t.customLoader,L=void 0===T?null:T,R=t.openInNewTab,I=void 0===R||R,D=t.fetcher,j=t.fallbackImageSrc,_=void 0===j?l:j,A=t.explicitImageSrc,H=void 0===A?null:A,q=e.useRef(!0),B=e.useState(),F=B[0],P=B[1],U=e.useState(!0),z=U[0],M=U[1];if(e.useEffect((function(){return q.current=!0,M(!0),D?D(n).then((function(e){q.current&&(!function(e){return!!e&&null!==e.title&&null!==e.description&&null!==e.image&&null!==e.siteName&&null!==e.hostname&&void 0!==e.title&&void 0!==e.description&&void 0!==e.image&&void 0!==e.siteName&&void 0!==e.hostname&&"null"!==e.image&&!e.image.startsWith("/")}(e)?P(null):P(e),M(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),q.current&&(P(null),M(!1))})):fetch("https://rlp-proxy.herokuapp.com/v2?url="+n).then((function(e){return e.json()})).then((function(e){q.current&&(P(e.metadata),M(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),q.current&&(P(null),M(!1))})),function(){q.current=!1}}),[n,D]),z&&S)return L?r.default.createElement(r.default.Fragment,null,L):r.default.createElement(i,{width:d,imageHeight:m,margin:p});if(!F)return r.default.createElement(r.default.Fragment,null,g);var O=F.image,W=F.description,G=F.title,J=F.siteName,K=F.hostname;return r.default.createElement("div",{"data-testid":"container",onClick:function(){var e=I?"_blank":"_self";window.open(n,e)},className:"Container "+o,style:{width:d,height:c,borderRadius:u,textAlign:f,margin:p,backgroundColor:b,borderColor:N}},r.default.createElement("div",{"data-testid":"image-container",style:{borderTopLeftRadius:u,borderTopRightRadius:u,backgroundImage:"url("+(H||O||_)+"), url("+_+")",height:m},className:"Image"}),r.default.createElement("div",{className:"LowerContainer"},r.default.createElement("h3",{"data-testid":"title",className:"Title",style:{color:w}},G),W&&r.default.createElement("span",{"data-testid":"desc",className:"Description Secondary",style:{color:k}},s&&W.length>s?W.slice(0,s)+"...":W),r.default.createElement("div",{className:"Secondary SiteDetails",style:{color:k}},J&&r.default.createElement("span",null,J," • "),r.default.createElement("span",null,K))))},exports.placeholderImg=l;
 //# sourceMappingURL=index.js.map

package.json

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

README.md

@@ -7,4 +7,4 @@ # React Link Preview
 <a href="https://twitter.com/intent/follow?screen_name=dhaiwat10">
-    <img src="https://img.shields.io/twitter/follow/dhaiwat10.svg?label=Follow%20@dhaiwat10" alt="Follow @dhaiwat10" />
-  </a>
+<img src="https://img.shields.io/twitter/follow/dhaiwat10.svg?label=Follow%20@dhaiwat10" alt="Follow @dhaiwat10" />
+</a>
 [![npm version](https://badge.fury.io/js/%40dhaiwat10%2Freact-link-preview.svg)](https://badge.fury.io/js/%40dhaiwat10%2Freact-link-preview)
@@ -85,2 +85,6 @@ ![package downloads](https://img.shields.io/npm/dt/@dhaiwat10/react-link-preview)
 
+### `explicitImageSrc` (string)
+
+The src that will be used for the image regardless of what the data source returns.
+
 ### `showLoader?` (boolean)
@@ -87,0 +91,0 @@

No alert changes

Improved metrics

Total package byte prevSize

37929

increased by1.46%

Lines of code

82

increased by1.23%

Number of lines in readme file

179

increased by2.29%

No dependency changes