🎨 useBackgroundImage: for loading background images with just one tiny hook!
Working with full-screen background images can be difficult, they are slow to load and especially when you have a hero image you want them to display immediatly or show a placeholder instead. Of course you can lazy load them using one of the many lazy loading utils out there on NPM. But I - sometimes - like to keep things small when I just need one thing. That's why I created this tiny hook!
This small hook provides the very basic functionality of:
- adding a placeholder to show while loading the (background) image
- checking when your image has been loaded
- if there is an error when trying to load the image
🎉 How to use the hook
Check out the /example directory for a full fletched example of the hook.
const { src, isLoading, hasError } = useBackgroundImage({
src: 'https://source.unsplash.com/weekly?water',
placeholder: '[[ insert smaller version or placeholder here ]]'
});