React-auth-image NPM

react-auth-image

React components for rendering images from protected URLs using authorization bearer token.

Installation

npm install react-auth-image

Usage

Render image using `img` element

Import the AuthImage component:

import { AuthImage } from "react-auth-image";

Provide the following props to the AuthImage component:

<AuthImage
  src={url}
  token={token}
  errorCallback={handleError}
  {...HTMLImageElementAttributes}
/>

`AuthImage` Props

Prop	Type	Description
`src`	`string`	(Required) The source URL for the image.
`token`	`string`	(Required) The authentication token for accessing the image. This token will be added to the Authorization header as `Bearer ${token}`.
`errorCallback`	`function`	An optional callback function to handle errors when accessing the image.
Other Attributes	-	Any additional HTML image element attributes can be passed as props.

Render image using `div` element background

Import the AuthBackgroundDiv component:

import { AuthBackgroundDiv } from "react-auth-image";

Provide the following props to the AuthBackgroundDiv component:

<AuthBackgroundDiv
  url={url}
  token={token}
  errorCallback={handleError}
  {...HTMLImageElementAttributes}
>
  {/* Children can be added here */}
  <p>This is a child</p>
</AuthBackgroundDiv>

`AuthBackgroundDiv` Props

Prop	Type	Description
`url`	`string`	(Required) The source URL for the image.
`token`	`string`	(Required) The authentication token for accessing the image. This token will be added to the Authorization header as `Bearer ${token}`.
`errorCallback`	`function`	An optional callback function to handle errors when accessing the image.
Other Attributes	-	Any additional HTML div element attributes can be passed as props.

Example

Render image using `AuthImage`:

import { AuthImage } from "react-auth-image";

const MyComponent = () => {
  const url = "https://example.com/image.jpg";
  const token = "your-auth-token";

  const handleError = (error) => {
    console.error(`Error rendering image: ${error.message}`);
  };

  return (
    <AuthImage
      src={url}
      token={token}
      errorCallback={handleError}
      alt="example-image"
      className="my-image"
    />
  );
};

Render image using `AuthBackgroundDiv`:

import { AuthBackgroundDiv } from "react-auth-image";

const MyComponent = () => {
  const url = "https://example.com/image.jpg";
  const token = "your-auth-token";

  const handleError = (error) => {
    console.error(`Error rendering image: ${error.message}`);
  };

  return (
    <AuthBackgroundDiv
      url={url}
      token={token}
      errorCallback={handleError}
      className="my-div"
    >
      <p>This is a child</p>
    </AuthBackgroundDiv>
  );
};