Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-thumbnail-generator

Package Overview
Dependencies
Maintainers
1
Versions
87
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-thumbnail-generator

react-thumbnail-generator

latest
Source
npmnpm
Version
4.1.2
Version published
Maintainers
1
Created
Source

💻 react-thumbnail-generator

English | 한국어 | 简体中文 | 日本語

Overview 🎨

react-thumbnail-generator is a versatile React component that allows you to easily create and customize thumbnails directly in your web browser. With an intuitive interface and rich feature set, you can generate thumbnails for your projects without leaving your application.

https://github.com/user-attachments/assets/5d4f8c23-72c6-43ae-aa62-5c46ee0ddfc6


Key Features

  • 🎯 Simple drag & drop interface
  • 🎨 Background color/image customization
  • ✍️ Text styling with multiple fonts and effects
  • 📏 Flexible canvas sizing
  • 🖼️ Multiple export formats (PNG, JPG, WebP)
  • 🔧 Highly configurable positioning and appearance
  • 📱 Desktop browser optimized
  • 📱 Client-side only component

Demo Page 🖼️

react-thumbnail-generator demo page


Version Compatibility 🔄

react-thumbnail-generator v4 supports react/react-dom v19.

If you are using react v18, please use version v3.

yarn add react-thumbnail-generator@^3

pnpm add react-thumbnail-generator@^3

npm install react-thumbnail-generator@^3

Quick Start 🚀

STEP 1️⃣

  • Install Package
yarn add react-thumbnail-generator

pnpm add react-thumbnail-generator

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';

const App = () => {
  return (
    <ThumbnailGenerator
      iconPosition="bottom-right"
      // Specify the position of the toggle button icon (top-left, top-right, bottom-left, bottom-right)

      modalPosition="right"
      // Specifies the position where the thumbnail generator will be displayed (left, right, center)

      additionalFontFamily={['Noto Sans', ...]}
      // Add custom fonts to use in the generator
      // Important: Fonts must be already loaded in your project to work

      isFullWidth={true}
      // Makes the thumbnail generator expand to full width when true

      isDefaultOpen={false}
      // Opens the thumbnail generator automatically on load when true
    />
  )
}

How to add Web Fonts 😊

STEP 1️⃣

  • Add a web font in public/index.html or index.html
  • Or import web fonts in your CSS/SCSS files
<!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️⃣

  • Add font names as an array to the additionalFontFamily prop
  • The font names must match exactly with the loaded web fonts
import ThumbnailGenerator from 'react-thumbnail-generator';

const App = () => {
  return (
    <ThumbnailGenerator additionalFontFamily={["Zeyada"]} {...props} />
  )
}

Options 📄

  • iconPosition
    • Optional
    • Default: bottom-right
    • Type:top-left | top-right | bottom-left | bottom-right
  • modalPosition
    • Optional
    • Default: right
    • Type:left | right | center
  • additionalFontFamily
    • Optional
    • Type: string[]
  • isFullWidth
    • Optional
    • Default: false
    • Type: boolean
  • isDefaultOpen
    • Optional
    • Default: false
    • Type: boolean

Contributing

Thank you for your contribution. ❤️ Anyone can contribute to react-thumbnail-generator.


License

MIT © ssi02014. See LICENSE for details.

Keywords

react
next
react-thumbnail-generator
thumbnail
image
banner

FAQs

Package last updated on 24 Aug 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys

Research

Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys

Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.

By Kirill Boychenko  -  Sep 24, 2025