https://github.com/sh20raj/universal-image-component

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!
https://github.com/sh20raj/universal-image-component

image image-component image-optimization image-processing nextjs reactjs

Last synced: 5 months ago
JSON representation

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!

• Host: GitHub
• URL: https://github.com/sh20raj/universal-image-component
• Owner: SH20RAJ
• License: mit
• Created: 2024-08-04T04:54:30.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-08-05T04:05:29.000Z (10 months ago)
• Last Synced: 2024-11-30T01:15:18.775Z (6 months ago)
• Topics: image, image-component, image-optimization, image-processing, nextjs, reactjs
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/universal-img-component
• Size: 8.79 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Universal Image Component 📸

`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!

![npm](https://img.shields.io/npm/v/universal-img-component)

[![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2FSH20RAJ%2Funiversal-image-component&labelColor=%23ba68c8&countColor=%232ccce4&style=flat&labelStyle=none)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2FSH20RAJ%2Funiversal-image-component)

[![GitHub issues](https://img.shields.io/github/issues/SH20RAJ/universal-image-component)](https://github.com/SH20RAJ/universal-image-component/issues)

[![GitHub discussions](https://img.shields.io/github/discussions/SH20RAJ/universal-image-component)](https://github.com/SH20RAJ/universal-image-component/discussions)

[![GitHub stars](https://img.shields.io/github/stars/SH20RAJ/universal-image-component)](https://github.com/SH20RAJ/universal-image-component/stargazers)

[![GitHub forks](https://img.shields.io/github/forks/SH20RAJ/universal-image-component)](https://github.com/SH20RAJ/universal-image-component/network)

[![GitHub license](https://img.shields.io/github/license/SH20RAJ/universal-image-component)]()

## Features ✨

- **Normal Mode**: Display images using standard URLs.

- **Cloudinary Mode** (Recommended): Use Cloudinary for image transformations and optimizations.

- **Base64 Mode**: Convert images to Base64 format.

- **CDN Mode**: Optimize images using a CDN service.

- **Text Mode**: Create text-based images with Statically’s Open Graph service.

- **TextBase Mode**: Convert text-based image URLs to Base64.

- **Next Mode**: Use Next.js `Image` component for optimization (in a Next.js environment).

## Installation 🚀

To get started, install the package via npm or yarn:

```bash

npm install universal-img-component

# or

yarn add universal-img-component

```

## Usage 📚

### Importing the Component

Import the `Img` component:

```jsx

import Img from 'universal-img-component';

```

### Normal Mode 🖼️

Displays an image using the standard URL:

```jsx



```

### Base64 Mode 🔄

Converts the image to Base64 format:

```jsx



```

### CDN Mode 🌐

Uses a CDN to serve and optimize the image:

```jsx



```

### Text Mode 📝

Generates an image with text using Statically’s Open Graph service:

```jsx



```

### TextBase Mode 🖋️

Generates a text-based image URL and converts it to Base64 format:

```jsx



```

### Next Mode 🚀

Uses Next.js `Image` component for optimized handling:

```jsx



```

### Cloudinary Mode ☁️

Uses Cloudinary for image transformations and optimizations:

```jsx



```

## Props 🛠️

- `src` (string): The source URL or text for the image.

- `mode` (string): Mode to use. Options: `"normal"`, `"base64"`, `"cdn"`, `"text"`, `"textbase"`, `"next"`, `"cloudinary"`. Default is `"normal"`.

- `width` (string|number): Width of the image. Applies to all modes.

- `height` (string|number): Height of the image. Applies to all modes.

- `format` (string): Format of the image in CDN and Cloudinary modes (e.g., `"webp"`, `"jpg"`, `"png"`).

- `fit` (string): Fit mode in CDN and Cloudinary modes (e.g., `"cover"`, `"contain"`, `"fill"`, `"inside"`, `"outside"`).

- `text` (string): Text for text modes (`"text"` and `"textbase"`).

- `theme` (string): Theme for text-based images (e.g., `"dark"`). Applies to text modes.

- `fontsize` (string): Font size for text-based images (e.g., `"24px"`). Applies to text modes.

## License 📜

This package is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.

## Contact 📫

For 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 [[email protected]](mailto:[email protected]).