Nascent Personality Manifestation
    Wondering what’s next for npm?Check out our public roadmap! »

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

    0.0.2-beta-5 • Public • Published

    img-suspense

    Build Status Coverage Status

    Gif Demo

    Demo

    A React img component like React.Suspense!

    Actually, its all props are same as <img/> like src alt...

    You should pass a react element to fallback prop.

    When image are still pending, it'll show fallback element.

    Intallation

    $ yarn add img-suspense

    Usage

    import ImgSuspense from 'img-suspense';
     
    <ImgSuspense
      src="./cutecat.jpg"
      alt="cat"
      style={{width:200px}}
      fallback={<p>Pending...</p>}
      />
     

    Handle Exception

    Gif Demo

    Error Boundary vs onError

    There's an example show how to handle exception.

    Error Boundary

    <ErrorBoundary>
      <ImgSuspense src="./path/picuture.jpg" fallback={<p>Pending...</p>} />
    </ErrorBoundary>

    If the img fails to load (for example, due to network failure), it will trigger an error.

    You can handle these errors to show a nice user experience and manage recovery with Error Boundaries.

    That's a same way you handle React.suspense exception.

    Use onError to catch

    <ImgSuspense
      onError={e => console.log('Error occurs! Override ImgSuspense exception')}
      src="./path/picuture.jpg"
      fallback={<p>Pending...</p>}
    />

    You can just override onError handler to prevent component exception, treat it like an img element!


    LICENSE MIT © 2019 realdennis

    Install

    npm i img-suspense

    DownloadsWeekly Downloads

    5

    Version

    0.0.2-beta-5

    License

    MIT

    Unpacked Size

    9.25 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar