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
- ๐ฏ 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
react-thumbnail-generator demo page
react-thumbnail-generator v4 supports react/react-dom v19 and above.
If you are using react 18 or below, please use version v3.4.0.
yarn add react-thumbnail-generator@^3.4.0pnpm add react-thumbnail-generator@^3.4.0npm install react-thumbnail-generator@^3.4.0- 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)
iconSize="medium"
// Sets the size of the toggle button icon (small, medium, large)
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} />
)
}- iconPosition
- Optional
- Default:
bottom-right - Type:
top-left | top-right | bottom-left | bottom-right
- 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
Thank you for your contribution. โค๏ธ Anyone can contribute to react-thumbnail-generator.
MIT ยฉ ssi02014. See LICENSE for details.
