https://github.com/ssi02014/react-thumbnail-generator

Simple React Thumbnail Generator Component 😄
https://github.com/ssi02014/react-thumbnail-generator

component components-library image react storybook thumbnail thumbnail-images

Last synced: 10 months ago
JSON representation

Simple React Thumbnail Generator Component 😄

• Host: GitHub
• URL: https://github.com/ssi02014/react-thumbnail-generator
• Owner: ssi02014
• License: mit
• Created: 2023-02-15T03:10:33.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2025-08-21T10:29:54.000Z (10 months ago)
• Last Synced: 2025-08-21T11:26:22.921Z (10 months ago)
• Topics: component, components-library, image, react, storybook, thumbnail, thumbnail-images
• Language: TypeScript
• Homepage: https://ssi02014.github.io/react-thumbnail-generator/
• Size: 7.79 MB
• Stars: 26
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 💻 react-thumbnail-generator

English | [한국어](README-ko_kr.md) | [简体中文](README-zh_cn.md) | [日本語](README-ja_jp.md)



  





  





  





  

    

  



## 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](https://ssi02014.github.io/react-thumbnail-generator/?path=/story/components-thumbnailgenerator--default)




## Version Compatibility 🔄

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

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

```shell

yarn add react-thumbnail-generator@^3

```

```shell

pnpm add react-thumbnail-generator@^3

```

```shell

npm install react-thumbnail-generator@^3

```




## Quick Start 🚀

### STEP 1️⃣

- Install Package

```shell

yarn add react-thumbnail-generator

```

```shell

pnpm add react-thumbnail-generator

```

```shell

npm install react-thumbnail-generator

```




### STEP 2️⃣

- Add `` component.

- ThumbnailGenerator is automatically rendered as a `document.body` child by default using `Portal`.

```jsx

import ThumbnailGenerator from 'react-thumbnail-generator';

const App = () => {

  return (

    

  )

}

```




## 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

```html

  

    

    

    

    

    

  

  

    


  


```




### STEP 2️⃣

- Add font names as an array to the `additionalFontFamily` prop

- The font names must match exactly with the loaded web fonts

```jsx

import ThumbnailGenerator from 'react-thumbnail-generator';

const App = () => {

  return (

    

  )

}

```




## 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](./LICENSE) for details.