Migration from react-lazy-load-image-component

Move to lazymage. Change the imports and keep your code.

lazymage has the same API as react-lazy-load-image-component. It has the same components, props, and CSS classes.

Change the imports

1. Install lazymage and remove the old package.
2. Change the component imports.
3. Change the effect CSS imports.

- import { LazyLoadImage } from "react-lazy-load-image-component";
- import "react-lazy-load-image-component/src/effects/blur.css";
+ import { LazyLoadImage } from "lazymage";
+ import "lazymage/effects/blur.css";

LazyLoadImage, LazyLoadComponent, and trackWindowScroll have the same names.

Behavior differences

• React 19 only. lazymage needs react and react-dom 19 or newer.
• No runtime dependencies. lazymage does not use lodash or prop-types.
• New data-state attribute. The <img> and the wrapper show the load state. See Load states.
• A new src resets the state. The state goes back to loading, the effect plays again, and onLoad and afterLoad run again for the new image.
• Images loaded before hydration. The state becomes loaded, the wrapper gets the lazy-load-image-loaded class, and onReady runs. onLoad and afterLoad do not run, because no load event reaches React.
• trackWindowScroll uses a ref. It finds the scroll container through the ref that it gives to your component, not through findDOMNode. Without an attached ref, it tracks the window. See Scroll containers.

New features

You can use these features after the migration. They are optional.

• fallbackSrc, onReady, preload, root, and scrollMargin props. See LazyLoadImage.
• The useLazyLoad and useImageStatus hooks. See Hooks.
• The effects turn off their transitions when the user prefers reduced motion.