gatsby-background-image/index.d.ts

Lazy-loading React background-image component with optional support for the blur-up effect.

import * as React from 'react';

declare module 'gatsby-background-image' {
  interface IFixedObject {
    width: number;
    height: number;
    src: string;
    srcSet: string;
    base64?: string;
    tracedSVG?: string;
    srcWebp?: string;
    srcSetWebp?: string;
    srcAvif?: string;
    srcSetAvif?: string;
    media?: string;
  }

  interface IFluidObject {
    aspectRatio: number;
    src: string;
    srcSet: string;
    sizes?: string;
    base64?: string;
    tracedSVG?: string;
    srcWebp?: string;
    srcSetWebp?: string;
    srcAvif?: string;
    srcSetAvif?: string;
    media?: string;
  }

  type IntrinsicTags = keyof JSX.IntrinsicElements;
  type DefaultExtraProps = { Tag?: 'div' } & JSX.IntrinsicElements['div'];
  type InferExtraProps<T extends IntrinsicTags | void> = T extends infer U
    ? U extends IntrinsicTags
      ? U extends 'div'
        ? DefaultExtraProps
        : { Tag: U } & JSX.IntrinsicElements[U]
      : DefaultExtraProps
    : DefaultExtraProps;

  interface IBackgroundImageProps {
    fixed?: IFixedObject | IFixedObject[] | (IFixedObject | string)[];
    fluid?: IFluidObject | IFluidObject[] | (IFluidObject | string)[];
    fadeIn?: string | boolean;
    durationFadeIn?: number;
    title?: string;
    alt?: string;
    critical?: boolean;
    crossOrigin?: string | boolean;
    backgroundColor?: string | boolean;
    onLoad?: () => void;
    onStartLoad?: (param: { wasCached: boolean }) => void;
    onError?: (event: any) => void;
    preserveStackingContext?: boolean;
    rootMargin?: string;
    keepStatic?: boolean;
  }

  export default class BackgroundImage<
    T extends IntrinsicTags
  > extends React.Component<InferExtraProps<T> & IBackgroundImageProps> {}
}