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
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 💻 |