react-imaggine

⚠️ Library is in an early stage of development and is far from being production-ready.

Features

• load image using low quality placeholder (LQIP)
• lazy load images only once they enter viewport
• easy to extend by using exported hooks

Components

These are top-level abstractions that aim to minimize the API surface of the library. If you need more control over what is rendered, consider using hooks.

ReactImaggine

Load image using LQIP. Use ReactImaggineLazy to load image once it enters viewport.

Props

• src (String) - path to an image
• placeholder (String) - path to a placeholder
• prefetch (Boolean) - prefetch image on requestIdleCallback
• other props are passed to HTML <img> element

Example

import { ReactImaggine, ReactImaggineLazy } from 'react-imaggine';
 
const MyComponent () =>
  <>
    <AboveTheFold>
      <ReactImaggine
        src="/assets/image.jpg"
        placeholder="/assets/placeholder.jpg"
        className="image"
      />
    </AboveTheFold>
    <BelowTheFold>
      <ReactImaggineLazy
        src="/assets/image-2.jpg"
        placeholder="/assets/placeholder-2.jpg"
        className="image"
        prefetch
      />
    </BelowTheFold>
  </>;

useLQIP

Controls image state - initial state is placeholder which then automatically updates to src.

Parameters

• placeholder (String) - path to a placeholder
• src (String) - path to an image
• loadingOptions (Object)
  • prefetch (Boolean) - prefetch image on requestIdleCallback
  • load (Boolean) - when explicitly set to false, it prevents state update

Example

const Image = () => {
  const { src } = useLQIP('/assets/placeholder.jpg', '/assets/image.jpg');
  return <img src={src} />;
};

useLQIPLazy - lazy load image using LQIP

Does the same as useLQIP except it updates image state only once it enters viewport.

Parameters

• placeholder (String) - path to a placeholder
• src (String) - path to an image
• loadingOptions (Object)
  • prefetch (Boolean) - prefetch image on requestIdleCallback

Example

const Image = () => {
  const { src, ref } = useLQIPLazy(
    '/assets/placeholder.jpg',
    '/assets/image.jpg'
  );
  return <img src={src} ref={ref} />;
};