Installation

To install the package, you can use npm or yarn:

npm install image-auth
# or
yarn add image-auth
# or
pnpm add image-auth

Usage

Importing the Component

import ImageAuth from 'image-auth';

Props

ImageAuth supports two modes: Auth and Local.

Auth Mode

| Prop | Type | Description | | ------------------ | ------------------------- | ------------------------------------------------------------------------------------------------- | | config | RequestInit | Required. Configuration object for the fetch request, including headers for authentication. | | url | string | Required. The URL of the image to fetch. | | placeholderSrc | string | Optional. The source of the placeholder image to display while the image is loading. | | errorFallbackSrc | string | Optional. The source of the fallback image to display if there is an error loading the image. | | style | React.CSSProperties | Optional. Inline styles for the image. | | alt | string | Optional. Alt text for the image. | | className | string | Optional. Class name for styling the image. | | mode | "Auth" | Required. Indicates that the component should operate in authentication mode. |

Local Mode

ImageAuth also supports all standard <img> attributes when used in Local mode.

| Prop | Type | Description | | ------------------ | ------------------------- | ------------------------------------------------------------------------------------------------- | | mode | "Local" | Required. Indicates that the component should operate in local mode. |

Example Usage

Auth Mode

import React from 'react';
import ImageAuth from 'image-auth';

const Example = () => {
  return (
    <ImageAuth
      mode="Auth"
      url="https://your-secure-endpoint.com/image.jpg"
      config={{
        headers: {
          Authorization: 'Bearer your_token_here'
        }
      }}
      placeholderSrc="/path/to/placeholder.jpg"
      errorFallbackSrc="/path/to/error-fallback.jpg"
      alt="Secure Image"
      style={{ width: '100%', height: 'auto' }}
      className="your-custom-class"
    />
  );
};

Local Mode

import React from 'react';
import ImageAuth from 'image-auth';

const Example = () => {
  return (
    <ImageAuth
      mode="Local"
      src="/path/to/local-image.jpg"
      alt="Local Image"
      style={{ width: '100%', height: 'auto' }}
      className="your-custom-class"
    />
  );
};

Features

• Auth Mode: Fetch and display images from a secure endpoint with customizable fetch configurations.
• Local Mode: Display images from local or public sources.
• Blur Effect: Applies a blur effect while the image is loading, providing a smooth user experience.
• Error Handling: Displays a fallback image if the image fails to load.
• Custom Styling: Supports custom styles and class names.

License

This project is licensed under the MIT License - see the LICENSE file for details.