Package Exports
- use-background-image
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-background-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
🎨 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 ]]'
});