Overview

Install

Install react image and background image fade and import the optional stylesheet once. The stylesheet provides the default premium shimmer skeleton, blur placeholder, and fade classes.

npm install react-image-and-background-image-fade

import 'react-image-and-background-image-fade/styles.css'

Quick start

Use Image when you want a normal accessible image with layout stability, a placeholder, and a fade-in.

Replay quick start

import { Image } from 'react-image-and-background-image-fade'

export function QuickStartPreview() {
  return (
    <Image
      src="/images/home/feature1.jpg"
      alt="Quick start preview"
      width={1080}
      height={720}
      placeholder="skeleton"
      fadeType="zoom-blur"
    />
  )
}

What is included

The public surface includes Image, BackgroundImage, Picture, ImageLoader, useImage, useInView, ImageConfigProvider, responsive helpers, and preload helpers.

Choose your next stop