{"id":23143464,"url":"https://github.com/sh20raj/universal-image-component","last_synced_at":"2025-08-17T14:33:30.690Z","repository":{"id":251568509,"uuid":"837804718","full_name":"SH20RAJ/universal-image-component","owner":"SH20RAJ","description":"universal-img-component is a versatile React component that simplifies handling images in various modes, including Base64, CDN, text-based images, and Next.js optimization. Perfect for any project needing dynamic image handling!","archived":false,"fork":false,"pushed_at":"2024-08-05T04:05:29.000Z","size":9,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-30T01:15:18.775Z","etag":null,"topics":["image","image-component","image-optimization","image-processing","nextjs","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/universal-img-component","language":"JavaScript","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/SH20RAJ.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":"2024-08-04T04:54:30.000Z","updated_at":"2024-08-05T04:05:33.000Z","dependencies_parsed_at":"2024-08-04T05:27:15.297Z","dependency_job_id":null,"html_url":"https://github.com/SH20RAJ/universal-image-component","commit_stats":null,"previous_names":["sh20raj/universal-image-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Funiversal-image-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Funiversal-image-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Funiversal-image-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Funiversal-image-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SH20RAJ","download_url":"https://codeload.github.com/SH20RAJ/universal-image-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230136111,"owners_count":18178813,"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","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":["image","image-component","image-optimization","image-processing","nextjs","reactjs"],"created_at":"2024-12-17T15:13:30.770Z","updated_at":"2024-12-17T15:13:31.250Z","avatar_url":"https://github.com/SH20RAJ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Universal Image Component 📸\n\n`universal-img-component` is a versatile React component that simplifies handling images in various modes, including Base64, CDN, text-based images, and Next.js optimization. Perfect for any project needing dynamic image handling!\n\n![npm](https://img.shields.io/npm/v/universal-img-component)\n[![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2FSH20RAJ%2Funiversal-image-component\u0026labelColor=%23ba68c8\u0026countColor=%232ccce4\u0026style=flat\u0026labelStyle=none)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2FSH20RAJ%2Funiversal-image-component)\n[![GitHub issues](https://img.shields.io/github/issues/SH20RAJ/universal-image-component)](https://github.com/SH20RAJ/universal-image-component/issues)\n[![GitHub discussions](https://img.shields.io/github/discussions/SH20RAJ/universal-image-component)](https://github.com/SH20RAJ/universal-image-component/discussions)\n[![GitHub stars](https://img.shields.io/github/stars/SH20RAJ/universal-image-component)](https://github.com/SH20RAJ/universal-image-component/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/SH20RAJ/universal-image-component)](https://github.com/SH20RAJ/universal-image-component/network)\n[![GitHub license](https://img.shields.io/github/license/SH20RAJ/universal-image-component)]()\n\n## Features ✨\n\n- **Normal Mode**: Display images using standard URLs.\n- **Cloudinary Mode** (Recommended): Use Cloudinary for image transformations and optimizations.\n- **Base64 Mode**: Convert images to Base64 format.\n- **CDN Mode**: Optimize images using a CDN service.\n- **Text Mode**: Create text-based images with Statically’s Open Graph service.\n- **TextBase Mode**: Convert text-based image URLs to Base64.\n- **Next Mode**: Use Next.js `Image` component for optimization (in a Next.js environment).\n\n## Installation 🚀\n\nTo get started, install the package via npm or yarn:\n\n```bash\nnpm install universal-img-component\n# or\nyarn add universal-img-component\n```\n\n## Usage 📚\n\n### Importing the Component\n\nImport the `Img` component:\n\n```jsx\nimport Img from 'universal-img-component';\n```\n\n### Normal Mode 🖼️\n\nDisplays an image using the standard URL:\n\n```jsx\n\u003cImg src=\"https://via.placeholder.com/150\" alt=\"placeholder\" mode=\"normal\" width=\"150\" height=\"150\" /\u003e\n```\n\n### Base64 Mode 🔄\n\nConverts the image to Base64 format:\n\n```jsx\n\u003cImg src=\"https://via.placeholder.com/150\" alt=\"placeholder\" mode=\"base64\" width=\"150\" height=\"150\" /\u003e\n```\n\n### CDN Mode 🌐\n\nUses a CDN to serve and optimize the image:\n\n```jsx\n\u003cImg\n  src=\"https://via.placeholder.com/150\"\n  alt=\"placeholder\"\n  mode=\"cdn\"\n  width=\"300\"\n  height=\"300\"\n  format=\"webp\"\n  fit=\"cover\"\n/\u003e\n```\n\n### Text Mode 📝\n\nGenerates an image with text using Statically’s Open Graph service:\n\n```jsx\n\u003cImg\n  src=\"\"\n  mode=\"text\"\n  text=\"Hello World\"\n  theme=\"dark\"\n  fontsize=\"24px\"\n  width=\"800\"\n  height=\"400\"\n  alt=\"Open Graph Image\"\n/\u003e\n```\n\n### TextBase Mode 🖋️\n\nGenerates a text-based image URL and converts it to Base64 format:\n\n```jsx\n\u003cImg\n  src=\"\"\n  mode=\"textbase\"\n  text=\"Hello World\"\n  theme=\"dark\"\n  fontsize=\"80px\"\n  width=\"800\"\n  height=\"400\"\n  alt=\"Base64 Open Graph Image\"\n/\u003e\n```\n\n### Next Mode 🚀\n\nUses Next.js `Image` component for optimized handling:\n\n```jsx\n\u003cImg src=\"https://via.placeholder.com/150\" alt=\"placeholder\" mode=\"next\" width={150} height={150} /\u003e\n```\n\n### Cloudinary Mode ☁️\n\nUses Cloudinary for image transformations and optimizations:\n\n```jsx\n\u003cImg\n  src=\"https://res.cloudinary.com/demo/image/upload/sample.jpg\"\n  mode=\"cloudinary\"\n  width=\"300\"\n  height=\"300\"\n  format=\"webp\"\n  fit=\"cover\"\n/\u003e\n```\n\n## Props 🛠️\n\n- `src` (string): The source URL or text for the image.\n- `mode` (string): Mode to use. Options: `\"normal\"`, `\"base64\"`, `\"cdn\"`, `\"text\"`, `\"textbase\"`, `\"next\"`, `\"cloudinary\"`. Default is `\"normal\"`.\n- `width` (string|number): Width of the image. Applies to all modes.\n- `height` (string|number): Height of the image. Applies to all modes.\n- `format` (string): Format of the image in CDN and Cloudinary modes (e.g., `\"webp\"`, `\"jpg\"`, `\"png\"`).\n- `fit` (string): Fit mode in CDN and Cloudinary modes (e.g., `\"cover\"`, `\"contain\"`, `\"fill\"`, `\"inside\"`, `\"outside\"`).\n- `text` (string): Text for text modes (`\"text\"` and `\"textbase\"`).\n- `theme` (string): Theme for text-based images (e.g., `\"dark\"`). Applies to text modes.\n- `fontsize` (string): Font size for text-based images (e.g., `\"24px\"`). Applies to text modes.\n\n## License 📜\n\nThis package is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.\n\n## Contact 📫\n\nFor any questions or feedback, feel free to open an issue or join the discussion on [GitHub Issues](https://github.com/SH20RAJ/universal-image-component/issues) and [GitHub Discussions](https://github.com/SH20RAJ/universal-image-component/discussions). You can also reach out via email at [sh20raj@gmail.com](mailto:sh20raj@gmail.com).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsh20raj%2Funiversal-image-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsh20raj%2Funiversal-image-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsh20raj%2Funiversal-image-component/lists"}