JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q52660F
  • License MIT

Simple React Image is <img> tag of react to gracefully manage large and broken images

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (simple-react-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    simple-react-image is a React component of <img> tag, to gracefully loading large images. Additionally it accepts two optional props, fallback and errorImage. Fallback will be displayed when image will be loading and errorImage will be displyed on any error happend while loading image

    demo image

    Install

    npm install --save simple-react-image

    or,

    yarn add simple-react-image
    Prop type desciption required
    fallback string loading image no
    errorImage string image on error no
    onStateChange function called on loading state change no

    all img tags props

    Usage

    import { Image as Img } from 'simple-react-image';
    
      <Img
        src={"https://images.pexels.com/photos/813011/pexels-photo-813011.jpeg"}
        />
    
      <Img
        src={"https://images.pexels.com/photos/813011/pexels-photo-813011.jpeg"}
        fallback="loading image url"
        errorImage='image displyed on error'
        onStateChange={(state)=>{
          console.log(state)
        }}
        />
    

    Demo

    Check Demo here