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 <ThumbnailGenerator> component.
ThumbnailGenerator is automatically rendered as a document.body child by default using Portal.
importThumbnailGeneratorfrom'react-thumbnail-generator';importiconImagefrom'../assets/colorImage.png';constApp=()=>{return(<ThumbnailGeneratorbuttonIcon={<imgsrc={iconImage}width={30}height={30}alt="iconImage"/>}// To insert the inner icon of the button that opens the thumbnail modal, use the ReactNode. // If you do not include this option, the default icon will be used.iconSize="medium"// Through this property, you can specify the size of the button icon.// However, if you are inserting a custom button icon, this option is meaningless.iconPosition={[0,20,20,0]}// Through this property, you can specify the position of the button icon.// [top, right, bottom, left]modalPosition='right'// Through this property, you can specify the position of the thumbnail generator.additionalFontFamily={['Noto Sans', ...]}// You can add the font of your choice to your project, but that font must already applied to your project.isFullWidth={true}// Setting this property to true will make the thumbnail generator full-width.isDefaultOpen={false}// Setting this property to true will open the thumbnail generator by default./>)}
How to add Web fonts ๐
STEP 1๏ธโฃ
Add a web font. public/index.html
or CSS fontFamily
<!DOCTYPE html><htmllang="en"><head><!-- ... --><!-- Add a web font --><linkrel="preconnect" href="https://fonts.googleapis.com" />
<linkrel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<linkhref="https://fonts.googleapis.com/css2?family=Zeyada&display=swap"
rel="stylesheet"
/>
</head><body><divid="root"></div></body></html>
STEP 2๏ธโฃ
Enter font names in array form in the AdditionalFontFamily option
while using your package with NextJS project, the error below occurred.
According to "Read more",
One of your dependencies (node_modules) imports a CSS file.
This normally happens when a package's source files are accidentally consumed, instead of the built package.