💻 react-thumbnail-generator

Simply create a thumbnail generator for your project🚀

Storybook Github Page

Features 😁

Download Thumbnail Image
Resize Canvas
- Limited Width Size (window.innerWidth – 70)
Choose Background Color
Choose Background Picture
Choose Font Family
Choose Font Size
Choose Font Stroke & color
Choose Font Color
Choose Image Type (png, jpg, webp)
Add Custom Web Font Family

How to use 😊

STEP 1️⃣

Install library

yarn add react-thumbnail-generator
or
npm install react-thumbnail-generator

STEP 2️⃣

Add the div box with the desired ID to public/index.html
<ThumbnailGenerator> is applied with a Portal to avoid being affected by CSS inheritance.

<!DOCTYPE html>
<html lang="en">
  <head>
  <!-- ... -->
  </head>
  <body>
    <div id="root"></div>
    <!-- Enter the ID you want. -->
    <div id="thumbnail-generator"></div>
  </body>
</html>

STEP 3️⃣

Add <ThumbnailGenerator> component.

import ThumbnailGenerator from 'react-thumbnail-generator';
import iconImage from '../assets/colorImage.png';

const App = () => {
  return (
    <div>
      <ThumbnailGenerator
        id="thumbnail-generator"
        // Enter the ID of the div you added in public/index.html.
        // If you do not enter this option, it will be rendered in the "root" div
        // However, there is a possibility that the UI will change due to CSS inheritance

        iconSrc={iconImage}
        // You can select the icon of the modal open button that you want.
        // If you do not enter this option, the default icon takes effect.

        position="bottom-right" 
        // You can select the location of the button that opens the modal.
        // If you do not enter this option, the default position(bottom-right) is applied

        iconSize="medium"
        // You can select the size of the button that opens the modal.
        // If you do not enter this option, the default size(medium) applies
        
        additionalFontFamily={['Noto Sans', ...]}
        // You can add the font you want. But those fonts should already be applied to your project.
      />
    </div>
  )
}

How do I apply Web Fonts? 🤔

STEP 1️⃣

Add a web font. public/index.html
or CSS fontFamily

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->

    <!-- Add a web font -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Zeyada&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="root"></div>
    <div id="thumbnail-generator"></div>
  </body>
</html>

STEP 2️⃣

Enter font names in array form in the AdditionalFontFamily option

import ThumbnailGenerator from 'react-thumbnail-generator';
import iconImage from '../assets/colorImage.png';

const App = () => {
  return (
    <div>
      <ThumbnailGenerator 
        id="thumbnail-generator" 
        additionalFontFamily={["Zeyada"]} // (*)
      />
    </div>
  )
}

Result Screen 🖥️

Video 📷

Background Color

Picture

🔥 The text displayed on the screen will be line-wrapped.

API 📄

id
- Optional
- Type: string
iconSrc
- Optional
- Default
- Type: string
position
- Optional
- Default: bottom-right
- Type: bottom-right | bottom-left | top-right | top-left
iconSize
- Optional
- Default: medium
- Type: small | medium | large
additionalFontFamily
- Optional
- Type: string[]

Reference

GitHub

View Github