Render prop

ImageLoader

ImageLoader is the lower-level escape hatch when the UI is yours and the loading state is the useful part.

Custom loading UI

The render prop exposes status, booleans, the loaded image, error, and whether the loader should remain mounted for the configured duration.

Custom loader status: loading

tsx

<ImageLoader src="/images/home/feature3.jpg" duration={1500}>
  {state => (
    <div className="cardDemo">
      {state.shouldShowLoader && <span>Custom loader status: {state.status}</span>}
      {state.hasLoaded && <img src={state.src} alt="Detail" />}
      {state.hasFailed && <span>Could not load image</span>}
    </div>
  )}
</ImageLoader>