Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emekankwo/react_image_with_auth
An NPM Package for React component or displaying images with authorization token or headers
https://github.com/emekankwo/react_image_with_auth
headers npm npm-package react reactjs
Last synced: 2 months ago
JSON representation
An NPM Package for React component or displaying images with authorization token or headers
- Host: GitHub
- URL: https://github.com/emekankwo/react_image_with_auth
- Owner: EmekaNkwo
- Created: 2024-07-25T08:22:43.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-31T23:34:00.000Z (5 months ago)
- Last Synced: 2024-10-01T21:17:48.684Z (3 months ago)
- Topics: headers, npm, npm-package, react, reactjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-image-with-auth
- Size: 31.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Image-With-Auth
A React component for displaying images with an authorization token in the request headers. This component is designed to be flexible and adaptable to various use cases, allowing the token to be provided via props or cookies.
## Features
- **Authorization Token**: Securely fetch images using an authorization token.
- **Placeholder and Fallback Images**: Display a placeholder while loading and a fallback image on error.
- **Error Handling**: Provides error state handling to manage image load failures.
- **Customization**: Supports custom alt text, styling, and class names.
- **Accessibility**: Ensures better accessibility with alt text and supports additional attributes.
## Installation
To install the component, use npm or yarn:
```bash
npm install react-image-with-auth
```
Or with yarn:
```bash
yarn add react-image-with-auth
```
## Usage
Basic Usage with Token from Cookie
This example demonstrates fetching an image using a token stored in cookies.
```tsx
import React from "react";
import ImageWithToken from "react-image-with-auth";
const App = () => {
const imageUrl = "https://example.com/secure-image.jpg";
return (
);
};
export default App;
```
Using Custom Headers
You can also provide custom headers, which will be merged with the Authorization token if present.
```tsx
import React from "react";
import ImageWithToken from "react-image-with-auth";
const App = () => {
const imageUrl = "https://example.com/secure-image.jpg";
const headers = {
"Custom-Header": "custom-value",
};
return (
);
};
export default App;
```
Using Token via Props
If the token is not available in cookies or you want to provide it directly, you can pass it via props.
```tsx
import React from "react";
import ImageWithToken from "react-image-with-auth";
const App = () => {
const imageUrl = "https://example.com/secure-image.jpg";
const token = "your-access-token-here";
return (
);
};
export default App;
```
### Props
- `imageUrl` (string, required): The URL of the image to display.
- `token` (string, optional): Authorization token to include in the request headers. If not provided, the component will try to use a token from cookies.
- `headers` (HeadersInit, optional): Custom headers object, array of tuples, or Headers instance.
- `alt` (string, optional): Alt text for the image. Defaults to "Image".
- `placeholder` (string, optional): URL of a placeholder image to display while loading.
- `fallback` (string, optional): URL of a fallback image to display on error.
- `className` (string, optional): CSS class for custom styling.
- `style` (React.CSSProperties, optional): Inline styles for the image.
- `onClick` (React.MouseEventHandler, optional): Callback function to handle image click events.
## Development
### Prerequisites
- Node.js
- npm or yarn
### Setup
1. Clone the repository:
```bash
git clone https://github.com/EmekaNkwo/react_image_with_auth.git
cd react_image_with_auth
```
2. Install dependencies:
```bash
npm install
# or
yarn install
```
### Building
To build the project, run:
```bash
npm run build
```
## Contributing
Contributions are welcome! Please open an issue or submit a pull request with your improvements.
## License
This project is licensed under the MIT License.
## Acknowledgements
- [js-cookie](https://github.com/js-cookie/js-cookie)
- [react](https://github.com/facebook/react)
---
## Thank you for using React-Image-With-Auth!