@gdo-bzh/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

Usage no npm install needed!

<script type="module">
  import gdoBzhSuspenseImage from 'https://cdn.skypack.dev/@gdo-bzh/suspense-image';
</script>

README

version

suspense-image

NPM JavaScript Style Guide

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