feat: add fallbackImageSrc

Author: Dhaiwat10

README.md

@@ -77,6 +77,10 @@ A fallback component which will be rendered if a link preview could not be gener
 
 <hr />
 
+### `fallbackImageSrc` (string)
+
+A fallback image src/URL which will be used if there was no image found for the URL.
+
 ### `showLoader?` (boolean)
 
 Whether you want to display the default loading skeleton or not.

src/assets/img-placeholder.jpg

@@ -50,7 +50,13 @@ storiesOf('LinkPreview', module)
       margin='30px auto'
     />
   ))
-  .add('Placeholder image', () => <LinkPreview url='https://google.com' width='30vw' />)
+  .add('Fallback image', () => (
+    <LinkPreview
+      url='https://google.com'
+      width='30vw'
+      fallbackImageSrc='https://www.aljazeera.com/wp-content/uploads/2021/08/2019-12-07T000000Z_879038429_RC2LQD9L67FQ_RTRMADP_3_SOCCER-SPAIN-FCB-RCD-REPORT.jpg?resize=770%2C513'
+    />
+  ))
   .add('Using custom fetcher', () => (
     <LinkPreview url='stripe.com' fetcher={customFetcher} fallback={<div>Fallback</div>} />
   ));

src/components/LinkPreview/LinkPreview.stories.tsx

@@ -4,6 +4,7 @@ import './linkPreview.scss';
 import Skeleton from './Skeleton';
 
 const proxyLink = 'https://rlp-proxy.herokuapp.com/v2?url=';
+const placeholderImg = 'https://github.com/Dhaiwat10/react-link-preview/blob/master/src/assets/img-placeholder.jpg';
 
 function isValidResponse(res: any): res is APIResponse {
   return (
@@ -34,6 +35,7 @@ export interface LinkPreviewProps {
   customLoader?: JSX.Element[] | JSX.Element | null;
   openInNewTab?: boolean;
   fetcher?: (url: string) => Promise<APIResponse | null>;
+  fallbackImageSrc?: string;
 }
 
 export interface APIResponse {
@@ -63,6 +65,7 @@ export const LinkPreview: React.FC<LinkPreviewProps> = ({
   customLoader = null,
   openInNewTab = true,
   fetcher,
+  fallbackImageSrc = placeholderImg,
 }) => {
   const _isMounted = useRef(true);
   const [metadata, setMetadata] = useState<APIResponse | null>();
@@ -147,7 +150,7 @@ export const LinkPreview: React.FC<LinkPreviewProps> = ({
         style={{
           borderTopLeftRadius: borderRadius,
           borderTopRightRadius: borderRadius,
-          backgroundImage: `url(${image})`,
+          backgroundImage: `url(${image || fallbackImageSrc})`,
           height: imageHeight,
         }}
         className='Image'

src/components/LinkPreview/LinkPreview.tsx

@@ -1,6 +1,6 @@
 module.exports = {
   extends: 'stylelint-config-standard',
-  ignoreFiles: ['src/**/*.snap'],
+  ignoreFiles: ['src/**/*.snap', 'src/assets/*.jpg'],
   rules: {
     'value-keyword-case': null,
   },