suspense-image

the package contains:

• useImageResource hook that handles image pre-loading and a basic pre-caching method (no invalidation cache is implemented)
• SuspenseImage component based on the useImageResource hook

Install

yarn add @gdo-bzh/suspense-image react

Usage

import React from 'react';
import {CircleDots} from '@gdo-bzh/spinner';
import {SuspenseImage} from '@gdo-bzh/suspense-image';

const Example = () => (
  <ErrorBoundary Fallback={ErrorFallback}>
    <Suspense fallback={<CircleDots size="30px" />}>
      <SuspenseImage src='https://s3.amazonaws.com/uifaces/faces/twitter/plbabin/128.jpg' alt="avatar" />
    </Suspense>
  </ErrorBoundary>
)

Types

type UseImageResource = {
  (src: string): [Resource<string>]
}

type SuspenseImage = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & {src:string};

License

MIT © gdo-bzh