https://github.com/cergo123/react-protected-src
Use headers values when loading images in `src` attributes
https://github.com/cergo123/react-protected-src
Last synced: 5 months ago
JSON representation
Use headers values when loading images in `src` attributes
- Host: GitHub
- URL: https://github.com/cergo123/react-protected-src
- Owner: cergo123
- Created: 2022-03-14T14:33:17.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-03-14T15:04:22.000Z (about 3 years ago)
- Last Synced: 2024-12-22T01:45:14.897Z (5 months ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-protected-src
Use custom headers in `![]()
` `src` attribute easily.
With this hook you can use custom headers (e.g. JWT token) directly in `src` without worrying about the extra steps, and then you get your clean code.
#### 1. Installation:
```shell
npm i react-protected-src
```
or with yarn:
```shell
yarn add react-protected-src
```
#### 2. Import:
```javascript
import {useProtectedSrc} from "react-protected-src";
```
#### 3. Usage:
```javascript
export function Page() {
const base64 = useProtectedSrc('http://example.com/image.jpg', {'Authorization': 'Bearer SOME_TOKEN'})
return (
)
}
```
#### nextJS example:
```javascript
export default function Home() {
const base64 = useProtectedSrc('http://example.com/image.jpg', {'Authorization': 'Bearer SOME_TOKEN'})
return (
)
}
```