React-thumbnail-generator NPM

💻 react-thumbnail-generator

Video 📷

Features 😁

Optimized for browsers. Limited availability on mobile.
Download thumbnail images
Resize the canvas
Fill the background with colors or pictures
Select a blur effect
Select font family, textAlign, size, stroke, color, angle, lineHeight
Drag and Drop text on the canvas
Add custom web font families
Select the modal button and its location
Choose the image type (png, jpg, webp, svg)
Support TypeScript and Next(v13)

Top Icons Feature

1: Background Picture
2: Text Align (start, center, end)
2: Background Color
3: Font Color
4: Font Stroke Color
5: Blur Effect

How to use React 😊

STEP 1️⃣

Install Package

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

STEP 2️⃣

Add <ThumbnailGenerator> component.
ThumbnailGenerator is automatically rendered as a document.body child by default using Portal.

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

const App = () => {
  return (
    <ThumbnailGenerator
      buttonIcon={<img src={iconImage} width={30} height={30} alt="iconImage" />}
      // To insert the inner icon of the button that opens the thumbnail modal, use the ReactNode. 
      // If you do not include this option, the default icon will be used.

      iconSize="medium"
      // Through this property, you can specify the size of the button icon.
      // However, if you are inserting a custom button icon, this option is meaningless.

      iconPosition={[0, 20, 20, 0]}
      // Through this property, you can specify the position of the button icon.
      // [top, right, bottom, left]

      modalPosition='right'
      // Through this property, you can specify the position of the thumbnail generator.
      
      additionalFontFamily={['Noto Sans', ...]}
      // You can add the font of your choice to your project, but that font must already applied to your project.

      isFullWidth={true}
      // Setting this property to true will make the thumbnail generator full-width.

      isDefaultOpen={false}
      // Setting this property to true will open the thumbnail generator by default.
    />
  )
}

How to add 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>
  </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 (
    <ThumbnailGenerator 
      additionalFontFamily={["Zeyada"]} // (*)
    />
  )
}

API 📄

buttonIcon
- Optional
- Default:
- Type: ReactNode
iconPosition
- Optional
- Sequence: top, right, bottom, left
- Default: [0, 20, 20, 0]
- Type:[number, number, number, number]
modalPosition
- Optional
- Default: right
- Type:left | right | center
iconSize
- Optional
- Default: medium
- Type: small | medium | large
additionalFontFamily
- Optional
- Type: string[]
isFullWidth
- Optional
- Default: false
- Type: boolean
isDefaultOpen
- Optional
- Default: false
- Type: boolean