Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 months ago
JSON representation
Simple React Thumbnail Generator Component 😄
- Host: GitHub
- URL: https://github.com/ssi02014/react-thumbnail-generator
- Owner: ssi02014
- Created: 2023-02-15T03:10:33.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-09T09:12:46.000Z (9 months ago)
- Last Synced: 2024-11-02T01:05:15.738Z (3 months ago)
- Topics: component, components-library, image, react, storybook, thumbnail, thumbnail-images
- Language: TypeScript
- Homepage: https://ssi02014.github.io/react-thumbnail-generator/
- Size: 5.95 MB
- Stars: 23
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💻 react-thumbnail-generator
Simply create a thumbnail generator for your project 🚀
🌟 CONTRIBUTORS 🌟
Storybook Demo Page
Click on the icon.
## Video 📷
Default
Picture
## Features 😁
- **Optimized for browsers. Limited availability on mobile.**
- Download thumbnail images
- Resize the canvas
- Fill the background with colors or pictures
- Select a blur effect
- Select font family, textAlign, size, stroke, color, angle, lineHeight
- Drag and Drop text on the canvas
- Add custom web font families
- Select the modal button and its location
- Choose the image type (png, jpg, webp, svg)
- Support TypeScript and Next(v13)
## Top Icons Feature
- 1: Background Picture
- 2: Text Align (start, center, end)
- 2: Background Color
- 3: Font Color
- 4: Font Stroke Color
- 5: Blur Effect
## How to use React 😊
### STEP 1️⃣
- Install Package
```
yarn add react-thumbnail-generator
or
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';
import iconImage from '../assets/colorImage.png';
const App = () => {
return (
)
}
```
## How to add Web fonts 😊
### STEP 1️⃣
- Add a web font. `public/index.html`
- or CSS fontFamily
```html
```
### STEP 2️⃣
- Enter font names in array form in the AdditionalFontFamily option
```jsx
import ThumbnailGenerator from 'react-thumbnail-generator';
import iconImage from '../assets/colorImage.png';
const App = () => {
return (
)
}
```
## API 📄
- iconPosition
- **Optional**
- Sequence: [top, right, bottom, left]
- Default: `[0, 20, 20, 0]`
- Type:`[number, number, number, number]`
- 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`
## Reference
- https://github.com/wormwlrm/kwakcheolyong
- https://github.com/banner-maker/banner-makers