English | ํ๊ตญ์ด | ็ฎไฝไธญๆ | ๆฅๆฌ่ช
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.
2025-07-25.1.28.20.mov
- ๐ฏ 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
react-thumbnail-generator demo page
react-thumbnail-generator v4 supports react/react-dom v19.
If you are using react v18, please use version v3.
yarn add react-thumbnail-generator@^3pnpm add react-thumbnail-generator@^3npm install react-thumbnail-generator@^3- Install Package
yarn add react-thumbnail-generatorpnpm add react-thumbnail-generatornpm install react-thumbnail-generator- Add
<ThumbnailGenerator>component. - ThumbnailGenerator is automatically rendered as a
document.bodychild by default usingPortal.
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
/>
)
}- Add a web font in
public/index.htmlorindex.html - Or import web fonts in your
CSS/SCSSfiles
<!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>- Add font names as an array to the
additionalFontFamilyprop - The font names must match exactly with the loaded web fonts
import ThumbnailGenerator from 'react-thumbnail-generator';
const App = () => {
return (
<ThumbnailGenerator additionalFontFamily={["Zeyada"]} {...props} />
)
}| 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 |
Thank you for your contribution. โค๏ธ Anyone can contribute to react-thumbnail-generator.
MIT ยฉ ssi02014. See LICENSE for details.