TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

🎨 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: '',
  placeholder: '[[ insert smaller version or placeholder here ]]'

Package Sidebar


npm i use-background-image

Weekly Downloads






Unpacked Size

18.1 kB

Total Files


Last publish


  • daphnesmit