Image

Basic usage

Note here that all unknown props like alt and title are passed through to the resulting img element.

import { Image } from "react-image-and-background-image-fade";

class Example extends Component {
  render() {
    return (
      <Image
        src="https://example.com/neon_cat.jpg"
        width="300px"
        height="300px"
        alt="flying cat"
        title="Neon cat"
      />
    );
  }
}

Responsive

When using the isResponsive you must ensure that both the width and height are in pixel format, this is because Image calculates the aspect ratio based on the image's width and height. The resulting element will have a width set to 100% and will fill the parent container.

import { Image } from "react-image-and-background-image-fade";

class Example extends Component {
  render() {
    return (
      <Image
        src="https://example.com/neon_cat.jpg"
        width="800px"
        height="400px"
        isResponsive
      />
    );
  }
}

Lazy loading

Internally React Image and Background Image Fade makes use of Visibility Sensor. When using lazyLoad the image will begin loading as soon as the image is partially visible in the viewport.

import { Image } from "react-image-and-background-image-fade";

class Example extends Component {
  render() {
    return (
      <Image
        src="me_drinking_pina_colada.tiff"
        width="800px"
        height="400px"
        lazyLoad
      />
    );
  }
}

Custom loaders

React Image and Background Image Fade shows a default loader when none is provided which a plain light grey element with an animated 'shine', similar to how Facebook decorate their loading skeletons. You can however specify your own loader element using the renderLoader render prop. This expects a function that renders your custom loader.

hasLoaded is passed to the function so that your loader can be aware that the image is loaded and you can begin your own transition. Note that the loader will be unmounted after the transition time has finished.

hasFailed is so that you can show a custom error in the event of an image load fail.

import { Image } from "react-image-and-background-image-fade";

class Example extends Component {
  render() {
    return (
      <Image
        src="me_drinking_pina_colada.tiff"
        width="20%"
        height="10%"
        renderLoader={({ hasLoaded, hasFailed }) => (
          <div className="MyAwesomeLoader">
            I'm loading here!
            {hasFailed && <span>But I have failed</span>}
            {hasLoaded && (
              <span>
                I'll be here for (transitionTime) milliseconds after load
              </span>
            )}
          </div>
        )}
      />
    );
  }
}

Props

All initial prop values are undefined unless otherwise specified. src, width and height are the only required props.

Prop	Description
`src` [string]	URI to the image, can be an imported local image or a remote image.
`width` [string]	Width of the image in string format. This can be any valid CSS value such as "20px", "20%", "20em" etc. When using `isResponsive` width must be in px format.
`height` [string]	Height of the image in string format. This can be any valid CSS value such as "20px", "20%", "20em" etc. When using `isResponsive` width must be in px format.
`transitionTime` [string default 0.3s]	Time used for the fade transition. This can be any valid CSS timing value such as "0.3s", "300ms", "3s". This is also used for unmounting the loader component, so once the image has loaded, `<Image/>` will wait for 0.3s (or `transitionTime`) before unmounting the loader.
`renderLoader` [func]	A function that renders a custom loader. The function will call `renderLoader` with an object containing the keys `hasLoaded` and `hasFailed`. See Custom loaders.
`disableLoader` [bool]	Stop loader element from being shown while the image is loading. Note this will override the behaviour of `renderLoader`.
`wrapperClassName` [string]	The `className` to apply to the wrapper element.
`lazyLoad` [bool default false]	Enable or disable lazy loading. See lazy loading.
`isResponsive` [bool default false]	Enable or disable responsiveness. See Responsive.