Nuclear Pumpkin Mocha

    react-suspense-img
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    ️⚠️ Please note this package relies on experimental React features that are not yet available in a stable release. By definition, this means this package is also experimental. See the React documentation on current mode for more details.

    🖼 react-suspense-img

    A simple React image component that suspends while loading.

    Usage

    Import the Img component and image resource cache.

    import { Img, resource } from 'react-suspense-img';

    Use the Img component as you would a standard img element. However, ensure to wrap it (at the desired place in the tree) with a ErrorBoundary and React.Suspense. The Img component will suspend (while loading) or throw an error (if an error occurred loading the image).

    // Start fetching early, following the render-as-you-fetch pattern.
    resource.preloadImage('https://placekitten.com/12/34');
     
    const Component = () => (
      <ErrorBoundary>
        <React.Suspense fallback="Loading...">
          <Img src="https://placekitten.com/12/34" width={64} alt="Kitten" />
        </React.Suspense>
      </ErrorBoundary>
    );

    Credit

    Keywords

    none

    Install

    npm i react-suspense-img

    DownloadsWeekly Downloads

    60

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    34.9 kB

    Total Files

    26

    Last publish

    Collaborators

    • skovy