Introducing react-webpage-thumbnail

react-webpage-thumbnail - React-webpage-thumbnail renders a react component of an static thumbnail image of an webpage - simply pass in the webpage url in the url prop. Resizing functionalities and loading animation are also provided out of the box.

Live Demo

Checkout the Storybook page with example usages

Installing

Using npm:

$ npm install react-webpage-thumbnail

Using yarn:

$ yarn add react-webpage-thumbnail

Usage

import React from "react";
import Thumbnail from "react-webpage-thumbnail";

<Thumbnail url="https://nodejs.org/en/download/" />;

Adjusting the size (iframe will scale to fit)

<Thumbnail
  url="https://nodejs.org/en/download/"
  width={200}
  height={200}
  iframeHeight={1920}
  iframeWidth={1080}
/>

Make the thumbnail (iframe) interactive

<Thumbnail url="https://nodejs.org/en/download/" interactive />

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, react-webpage-thumbnail is maintained under the Semantic Versioning guidelines.

Built With

• ReactJS - Expressive, robust, feature-rich CSS language built for nodejs
• iframe - HTML iframe

License

This project is licensed under the MIT License - see the LICENSE file for details

Backstory - Why webpage-thumbnails

While working on a project for creating a GoogleSlides-like slideshow authoring tool with ReactJs, a thumbnail of the slide canvas was needed for users to preview.

There are two approachs to this from my research:

• Image based : render the canvas and generate a thumbnail image of the canvas. Update the image when the slide canvas is updated.
• iframe based : load the canvas in an iframe and make it non-iteractive, which is like an image thumbnail preview of the canvas.

Pros and Cons :

• Image based : better performance on client, but updating logic can be quite abit of workload
• iframe based : very bad performance, as the client will need to render many iframes. But this is very easy to implement.

Google Docs, Slides and Sheets uses the Image based solution. However, in our scenario, it was a MVP/Demo application so performance was not scoped. Therefore, it lead to the creation of this npm library, with the iframe based solution.

Contributors ✨

Thanks goes to these wonderful people