Simple Component with background image LazyLoad

Hi! Here simple component which uses @frontity/hooks/use-in-view to lazyload component background-image

In “src” prop - the src of image to lazy load in background
In “Tag” - the html tag prop to use in component

import useInView from "@frontity/hooks/use-in-view";

export const LazyBackground = ({ children, src, Tag = "div", }) => {

  const { ref, inView } = useInView({ triggerOnce: true });

  return (
      style={inView ? { backgroundImage: `url(${src})` } : {}}

Thanks for sharing :blush:

1 Like

Hi, thanks for your snippet. Could you please show me how to use it in a component? I get a “Cannot convert undefined or null to object” error.

I’m using it like so

<LazyBackground src={source_url} Tag="div" />