{"id":18830677,"url":"https://github.com/ssi02014/react-thumbnail-generator","last_synced_at":"2025-08-26T20:19:37.089Z","repository":{"id":65906158,"uuid":"601887417","full_name":"ssi02014/react-thumbnail-generator","owner":"ssi02014","description":"Simple React Thumbnail Generator Component 😄","archived":false,"fork":false,"pushed_at":"2025-08-21T10:29:54.000Z","size":8166,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-21T11:26:22.921Z","etag":null,"topics":["component","components-library","image","react","storybook","thumbnail","thumbnail-images"],"latest_commit_sha":null,"homepage":"https://ssi02014.github.io/react-thumbnail-generator/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ssi02014.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-15T03:10:33.000Z","updated_at":"2025-08-21T10:29:20.000Z","dependencies_parsed_at":"2023-11-10T18:48:36.260Z","dependency_job_id":null,"html_url":"https://github.com/ssi02014/react-thumbnail-generator","commit_stats":{"total_commits":70,"total_committers":2,"mean_commits":35.0,"dds":0.02857142857142858,"last_synced_commit":"ecf17fc47ebd22c5fb4b5f86ef6f68ea0d13626c"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/ssi02014/react-thumbnail-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Freact-thumbnail-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Freact-thumbnail-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Freact-thumbnail-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Freact-thumbnail-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ssi02014","download_url":"https://codeload.github.com/ssi02014/react-thumbnail-generator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Freact-thumbnail-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271818453,"owners_count":24827608,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-24T02:00:11.135Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","components-library","image","react","storybook","thumbnail","thumbnail-images"],"created_at":"2024-11-08T01:49:53.304Z","updated_at":"2025-08-26T20:19:37.081Z","avatar_url":"https://github.com/ssi02014.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💻 react-thumbnail-generator\nEnglish | [한국어](README-ko_kr.md) | [简体中文](README-zh_cn.md) | [日本語](README-ja_jp.md)\n\n\u003ca href=\"https://www.npmjs.com/package/react-thumbnail-generator\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/react-thumbnail-generator.svg\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-thumbnail-generator\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dt/react-thumbnail-generator.svg\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/package/react-thumbnail-generator\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-thumbnail-generator/latest?style=flat-square\"\u003e\n\u003c/a\u003e\n\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-thumbnail-generator\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/64779472/219855230-d6515d16-334c-432a-8d20-fa171e17c231.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Overview 🎨\n`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.\n\nhttps://github.com/user-attachments/assets/5d4f8c23-72c6-43ae-aa62-5c46ee0ddfc6\n\n\u003cbr /\u003e\n\n### Key Features\n- 🎯 Simple drag \u0026 drop interface\n- 🎨 Background color/image customization \n- ✍️ Text styling with multiple fonts and effects\n- 📏 Flexible canvas sizing\n- 🖼️ Multiple export formats (PNG, JPG, WebP)\n- 🔧 Highly configurable positioning and appearance\n- 📱 Desktop browser optimized\n- 📱 Client-side only component\n\n\u003cbr /\u003e\n\n## Demo Page 🖼️\n[react-thumbnail-generator demo page](https://ssi02014.github.io/react-thumbnail-generator/?path=/story/components-thumbnailgenerator--default)\n\n\u003cbr /\u003e\n\n## Version Compatibility 🔄\nreact-thumbnail-generator `v4` supports `react/react-dom v19`.\n\nIf you are using react v18, please use version `v3`.\n\n```shell\nyarn add react-thumbnail-generator@^3\n```\n```shell\npnpm add react-thumbnail-generator@^3\n```\n```shell\nnpm install react-thumbnail-generator@^3\n```\n\n\u003cbr /\u003e\n\n## Quick Start 🚀\n### STEP 1️⃣\n- Install Package\n```shell\nyarn add react-thumbnail-generator\n```\n```shell\npnpm add react-thumbnail-generator\n```\n\n```shell\nnpm install react-thumbnail-generator\n```\n\n\u003cbr /\u003e\n\n### STEP 2️⃣\n- Add `\u003cThumbnailGenerator\u003e` component.\n- ThumbnailGenerator is automatically rendered as a `document.body` child by default using `Portal`.\n\n```jsx\nimport ThumbnailGenerator from 'react-thumbnail-generator';\n\nconst App = () =\u003e {\n  return (\n    \u003cThumbnailGenerator\n      iconPosition=\"bottom-right\"\n      // Specify the position of the toggle button icon (top-left, top-right, bottom-left, bottom-right)\n\n      modalPosition=\"right\"\n      // Specifies the position where the thumbnail generator will be displayed (left, right, center)\n\n      additionalFontFamily={['Noto Sans', ...]}\n      // Add custom fonts to use in the generator\n      // Important: Fonts must be already loaded in your project to work\n\n      isFullWidth={true}\n      // Makes the thumbnail generator expand to full width when true\n\n      isDefaultOpen={false}\n      // Opens the thumbnail generator automatically on load when true\n    /\u003e\n  )\n}\n```\n\n\u003cbr /\u003e\n\n## How to add Web Fonts 😊\n### STEP 1️⃣\n- Add a web font in `public/index.html` or `index.html`\n- Or import web fonts in your `CSS/SCSS` files\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n    \u003c!-- Add a web font --\u003e\n    \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\" /\u003e\n    \u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin /\u003e\n    \u003clink\n      href=\"https://fonts.googleapis.com/css2?family=Zeyada\u0026display=swap\"\n      rel=\"stylesheet\"\n    /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cbr /\u003e\n\n### STEP 2️⃣\n- Add font names as an array to the `additionalFontFamily` prop\n- The font names must match exactly with the loaded web fonts\n\n```jsx\nimport ThumbnailGenerator from 'react-thumbnail-generator';\n\nconst App = () =\u003e {\n  return (\n    \u003cThumbnailGenerator additionalFontFamily={[\"Zeyada\"]} {...props} /\u003e\n  )\n}\n```\n\n\u003cbr /\u003e\n\n## Options 📄\n- iconPosition\n  - **Optional**\n  - Default: `bottom-right`\n  - Type:`top-left | top-right | bottom-left | bottom-right`\n- modalPosition\n  - **Optional**\n  - Default: `right`\n  - Type:`left | right | center`\n- additionalFontFamily\n  - **Optional**\n  - Type: `string[]`\n- isFullWidth\n  - **Optional**\n  - Default: `false`\n  - Type: `boolean`\n- isDefaultOpen\n  - **Optional**\n  - Default: `false`\n  - Type: `boolean`\n\n\u003cbr /\u003e\n\n## Contributing\n\nThank you for your contribution. ❤️ Anyone can contribute to `react-thumbnail-generator`.\n\n\u003ca href=\"https://github.com/ssi02014/react-thumbnail-generator/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=ssi02014/react-thumbnail-generator\"\u003e\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\n## License\nMIT © ssi02014. See [LICENSE](./LICENSE) for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssi02014%2Freact-thumbnail-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fssi02014%2Freact-thumbnail-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssi02014%2Freact-thumbnail-generator/lists"}