Function CoveringLoader

A loader that wraps an element and covers it with a loading spinner, decreasing visibility of the content and blocking interactions. It requires a single child element, whose ref will provide a DOM element.

It has 3 modes of operation:

  • before - will add the loader as ::before element of the ref node
  • after - will add the loader as ::after element of the ref node
  • cover (default) - will add itself to the parent of the ref node, setting position: relative to it

Before/after modes will cover the background with semi-transparent white. Over mode will decrease the opacity of the wrapped element.

  • CoveringLoader(
        props: LoaderProps & {
            children: ReactElement;
            inertMode?: "block-interaction" | "cover-element" | "pass-through";
            mode?: "over" | "before" | "after";
        } & RefAttributes<HTMLElement>,
    ): ReactNode

  • Parameters

    • props: LoaderProps & {
          children: ReactElement;
          inertMode?: "block-interaction" | "cover-element" | "pass-through";
          mode?: "over" | "before" | "after";
      } & RefAttributes<HTMLElement>

    Returns ReactNode

Properties

$$typeof defaultProps? displayName? propTypes?

Properties

Readonly$$typeof

$$typeof: symbol

OptionaldefaultProps

defaultProps?: Partial<
    LoaderProps & {
        children: ReactElement;
        inertMode?: "block-interaction"
        | "cover-element"
        | "pass-through";
        mode?: "over" | "before" | "after";
    } & RefAttributes<HTMLElement>,
>

Deprecated

Use values for destructuring assignments instead.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

OptionalpropTypes

propTypes?: WeakValidationMap<
    LoaderProps & {
        children: ReactElement;
        inertMode?: "block-interaction"
        | "cover-element"
        | "pass-through";
        mode?: "over" | "before" | "after";
    } & RefAttributes<HTMLElement>,
>

Settings

Member Visibility

On This Page

Properties