Skip to content

Latest commit

ย 

History

History
224 lines (180 loc) ยท 6.22 KB

README.md

File metadata and controls

224 lines (180 loc) ยท 6.22 KB

๐Ÿ’ป 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

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2023-02-27 แ„‹แ…ฉแ„’แ…ฎ 9 53 09
  • 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.
import ThumbnailGenerator from 'react-thumbnail-generator';
import iconImage from '../assets/colorImage.png';

const App = () => {
  return (
    <ThumbnailGenerator
      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>
<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>

STEP 2๏ธโƒฃ

  • Enter font names in array form in the AdditionalFontFamily option
import ThumbnailGenerator from 'react-thumbnail-generator';
import iconImage from '../assets/colorImage.png';

const App = () => {
  return (
    <ThumbnailGenerator 
      additionalFontFamily={["Zeyada"]} // (*)
    />
  )
}

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