npm.io
4.2.0 • Published 5 months ago

react-thumbnail-generator

Licence
MIT
Version
4.2.0
Deps
7
Size
573 kB
Vulns
0
Weekly
0
Stars
28
SummaryDependencyVersions

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

  • Multi-layer system with drag, rotate, and resize per layer
  • Support for both text and image layers
  • Background color/image customization with auto-resize
  • Per-layer text styling (font, size, color, stroke, alignment)
  • Undo / Redo with keyboard shortcuts (Ctrl+Z / Ctrl+Shift+Z)
  • Flexible canvas sizing with boundary guard
  • Multiple export formats (PNG, JPG, WebP)
  • Mobile responsive layout

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
  • Install Package
yarn add react-thumbnail-generator
pnpm add react-thumbnail-generator
npm install react-thumbnail-generator

STEP
  • 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
  • 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
  • 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

Prop Type Default Description
iconPosition 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' 'bottom-right' Position of the toggle button icon
modalPosition 'left' | 'right' | 'center' 'right' Position where the thumbnail generator modal is displayed
additionalFontFamily string[] - Custom fonts to add to the generator (must be pre-loaded)
isFullWidth boolean false Expands the generator to full width
isDefaultOpen boolean false Opens the generator automatically on load

Contributing

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


License

MIT ssi02014. See LICENSE for details.

Keywords

reactnextreact-thumbnail-generatorthumbnailimagebannericongeneratorstyleimgpngjpgwebp