ong-react-link-preview/index.esm.js

React library to preview links - including hover color.

import e,{useRef as n,useState as t,useEffect as o}from"react";import i from"react-loading-skeleton";function r(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}r("/* 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    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");r(".skeleton-container {\n  border-radius: 7px;\n  border: 1px solid #eee; }\n\n.skeleton-lower-container {\n  padding: 10px; }\n");r("@keyframes react-loading-skeleton {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n.react-loading-skeleton {\n    --base-color: #ebebeb;\n    --highlight-color: #f5f5f5;\n    --animation-duration: 1.5s;\n    --animation-direction: normal;\n    --pseudo-element-display: block; /* Enable animation */\n\n    background-color: var(--base-color);\n\n    width: 100%;\n    border-radius: 0.25rem;\n    display: inline-flex;\n    line-height: 1;\n\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n    content: ' ';\n    display: var(--pseudo-element-display);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background-repeat: no-repeat;\n    background-image: linear-gradient(\n        90deg,\n        var(--base-color),\n        var(--highlight-color),\n        var(--base-color)\n    );\n    transform: translateX(-100%);\n\n    animation-name: react-loading-skeleton;\n    animation-direction: var(--animation-direction);\n    animation-duration: var(--animation-duration);\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n}\n");var a=function(n){var t=n.width,o=void 0===t?"100%":t,r=n.imageHeight,a=void 0===r?"30vh":r,l=n.margin;return e.createElement("div",{className:"skeleton-container",style:{width:o,margin:l}},e.createElement(i,{width:o,height:a}),e.createElement("div",{className:"skeleton-lower-container"},e.createElement(i,{count:3})))},l="https://i.imgur.com/UeDNBNQ.jpeg";var c=function(i){var r=i.url,l=i.className,c=void 0===l?"":l,d=i.width,s=i.height,m=i.descriptionLength,u=i.borderRadius,g=i.imageHeight,h=i.textAlign,p=i.margin,f=i.fallback,v=void 0===f?null:f,b=i.backgroundColor,k=void 0===b?"white":b,y=i.backgroundHoverColor,x=void 0===y?"white":y,w=i.primaryTextColor,N=void 0===w?"black":w,E=i.secondaryTextColor,C=void 0===E?"rgb(100, 100, 100)":E,S=i.borderColor,T=void 0===S?"#ccc":S,L=i.showLoader,I=void 0===L||L,D=i.customLoader,R=void 0===D?null:D,B=i.openInNewTab,H=void 0===B||B,U=i.fetcher,j=i.fallbackImageSrc,A=void 0===j?"https://i.imgur.com/UeDNBNQ.jpeg":j,z=i.explicitImageSrc,F=void 0===z?null:z,M=i.showPlaceholderIfNoImage,O=void 0===M||M,Q=i.onSuccess,X=void 0===Q?function(e){}:Q,_=n(!0),P=t(),W=P[0],q=P[1],G=t(!0),J=G[0],K=G[1];if(o((function(){return _.current=!0,K(!0),U?U(r).then((function(e){var n;_.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)?(n=null,q(null)):(n=e,q(e)),X(n),K(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),_.current&&(X(null),q(null),K(!1))})):fetch("https://rlp-proxy.herokuapp.com/v2?url="+r).then((function(e){return e.json()})).then((function(e){_.current&&(q(e.metadata),X(e.metadata),K(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),_.current&&(X(null),q(null),K(!1))})),function(){_.current=!1}}),[r,U]),J&&I)return R?e.createElement(e.Fragment,null,R):e.createElement(a,{width:d,imageHeight:g,margin:p});if(!W)return e.createElement(e.Fragment,null,v);var V=W.image,Y=W.description,Z=W.title,$=W.siteName,ee=W.hostname;return e.createElement("div",{"data-testid":"container",onClick:function(){var e=H?"_blank":"_self";window.open(r,e)},className:"Container "+c,style:{width:d,height:s,borderRadius:u,textAlign:h,margin:p,backgroundColor:k,borderColor:T}},(V||A)&&O&&e.createElement("div",{"data-testid":"image-container",style:{borderTopLeftRadius:u,borderTopRightRadius:u,backgroundImage:"url("+(F||V||A)+"), url("+A+")",height:g},className:"Image"}),e.createElement("div",{className:"LowerContainer"},e.createElement("h3",{"data-testid":"title",className:"Title",style:{color:N}},Z),Y&&e.createElement("span",{"data-testid":"desc",className:"Description Secondary",style:{color:C}},m?Y.length<=m?Y:Y.slice(0,m)+"...":Y),e.createElement("div",{className:"Secondary SiteDetails",style:{color:C}},$&&e.createElement("span",null,$," • "),e.createElement("span",{className:"Secondary SiteLink",onMouseOver:function(e){e.target.style.background=x},onMouseOut:function(e){e.target.style.background=k}},ee))))};export{c as LinkPreview,l as placeholderImg};
//# sourceMappingURL=index.esm.js.map