img-magik

Streamline image uploads and dynamic resizing effortlessly with the simple-image-resizer library. High-performance resizing, easy integration, and customizable options make your React apps shine with stunning visuals. Resize, upload, impress—simple as that!

img-magik is a lightweight React library that simplifies image uploading and resizing in web applications. It leverages the powerful Sharp library to provide efficient image processing while offering a user-friendly component for image uploads.

Table of Contents

• Features
• Installation
• Usage
• Configuration Options
• Events
• Common Issues
• Contribution
• License

Features

• Efficient Image Resizing: Utilizes Sharp for high-quality and efficient image resizing.
• User-Friendly Image Upload: Provides a simple React component (ImageUploader) for seamless image uploads.
• Customizable Dimensions: Allows users to specify the desired width and height for resized images.
• Optional Quality Control: Users can control the quality of resized images to balance file size and visual fidelity.
• Compression Level Adjustment: Provides an option to adjust compression levels for optimized image sizes.
• Support for Multiple Image Formats: Supports various formats (JPEG, PNG, WebP) for flexibility.
• Intersection Observer for Lazy Loading: Implements lazy loading of images for enhanced performance.
• Error Handling: Robust error handling for a smooth user experience.

Installation

npm install img-magik

usage

-this is an example of usage in react

import React from 'react';
import ImageUploader from 'img-magik';

const MyComponent = () => {
  return (
    <div>
      <h1>My Web Application</h1>
      <ImageUploader width={300} height={200} />
    </div>
  );
};

export default MyComponent;

configuration-options

-width (number): Desired width for the resized image. -height (number): Desired height for the resized image. -quality (number, optional): Image quality (1 to 100, default is 80). -compressionLevel (number, optional): Compression level for the chosen format (0 to 9, default is 9). -format (string, optional): Desired image format (e.g., 'jpeg', 'png', 'webp', default is 'jpeg').

EVENTS

onChange (function, optional): Triggered when a new image is selected.

##Common issues Error Handling: The library handles errors during the resizing process. Developers can use a try/catch block to handle custom errors.

##contribution Contributions are welcome! If you encounter issues or have ideas for improvements, please open an issue or submit a pull request on the GitHub repository.