Image-auth NPM

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.