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.


!GitHub issues

Live Demo

Checkout the Storybook page with example usages

Installing

Using npm:

``bash
$ npm install react-webpage-thumbnail
`

Using yarn:

`bash
$ yarn add react-webpage-thumbnail
`

Usage

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

;
`

$3

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

$3

`javascript

``

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

Lucas Gao 💻