react-use-images
v1.1.5
Published
React hook to preload multiple images.
Downloads
20
Readme
react-use-images custom hook
React hook to preload multiple images.
Install
npm install react-use-images
Usage
There are 3 use cases for react-use-images:
- Utilise useImages hook to preload images during the render step
- Utilise context component to make preloaded images available to child components
- Utilise loadImages() callback function to load images as a side effect
useImages
import React from 'react';
import { useImages, PreloadedImage, PreloadedState } from "react-use-images";
export const Component: FunctionComponent = () => {
const urls = ["https://somewebsite/image.png", "https://anotherwebsite/anotherimage.jpg"]
const crossorigin = null;
const imageStates: Map<string, PreloadedImage> = useImages(urls, crossorigin);
if (Array.from(imageStates.values()).some(image => image.state === PreloadedState.LOADING)) return null;
return (
<div>
{
Array.from(imageStates.values()).map(image => image.image)
}
</div>
)
}
PreloadImages
ParentComponent
import React from 'react';
import { PreloadImages, PreloadedImage, PreloadedState } from "react-use-images";
export const ParentComponent: FunctionComponent = () => {
const urls = ["https://somewebsite/image.png", "https://anotherwebsite/anotherimage.jpg"]
const ComponentToDisplayWhileWaiting = (<div>loading...</div>);
const ComponentToDisplayOnError = (<div>error</div>);
return (
<PreloadImages
urls={urls}
Waiting={ComponentToDisplayWhileWaiting}
Error={ComponentToDisplayOnError}
>
<ChildComponent>
</PreloadImages>
)
}
ChildComponent
import React from 'react';
import { PreloadedImage, ImageContext } from "react-use-images";
export const ChildComponent: FunctionComponent = () => {
const images = useContext(ImageContext) as Map<string, PreloadedImage>;
return (
Array.from(images.values()).map(image => image.image)
)
}
loadImages
import React, {useState} from 'react';
import { loadImages } from "react-use-images";
export const Component: FunctionComponent = () => {
const [images, setImages] = useState(null);
useEffect(() => {
const urls = ["https://somewebsite/image.png", "https://anotherwebsite/anotherimage.jpg"]
loadImages(urls, loadedImages => {
setImages(loadedImages);
});
},[]);
if (!images) return null;
return (
<div>
{
Array.from(images.values()).map(image => image.image)
}
</div>
)
}
License
MIT