antd-spin

Enhancing Ant Design's Spin as a Service. Inspired by Element Plus's Loading component.

Motivation

Enhance the Spin component of antd to support service calls, and the global state is a singleton mode.

Usage

Install

$ npm install antd-spin

Service

Import Spin service:

import { antdSpin } from "antd-spin";

Invoke it:

antdSpin.service(options);

The parameter options is the configuration of Spin, and its details can be found in the following table. SpinService returns a Spin instance, and you can close it by invoking its close method:

const spinInstance = antdSpin.service(options);
spinInstance.close();

Note that in this case the full screen Spin is singleton. If a new full screen Spin is invoked before an existing one is closed, the existing full screen Spin instance will be returned instead of actually creating another Spin instance:

const spinInstance1 = antdSpin.service();
const spinInstance2 = antdSpin.service();

// true
console.log(spinInstance1 === spinInstance2);

setTimeout(() => {
	// Calling the `close` method on any one of them can close this full screen Spin.
	spinInstance2.close();
}, 5000);

show time

Directive

import { AntdSpin } from "antd-spin";

const DemoSpin = () => {
	return (
		<AntdSpin fullscreen={true} />
	);
}

• fullscreen is true, return a fullscreen Spin.
• fullscreen is false, return a Spin.

Options

Name	Description	Type	Default
target	The DOM node Spin needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to document.querySelector to get the corresponding DOM node	string / HTMLElement	document.body
fullscreen	Show a full screen Spin	boolean	true
lock	Disable background scrolling	boolean	false
background	Background color of the mask	string	—
customClass	Custom class name for Spin	string	—
spinProps	The properties of antd's Spin component	SpinProps	{}

SpinProps

Name	Type	Description
prefixCls	string	Prefix class name (optional)
className	string	Class name (optional)
rootClassName	string	Root element class name (optional)
spinning	boolean	Whether to display the loading state
style	React.CSSProperties	Custom style object (optional)
size	SpinSize	Size (optional)
tip	React.ReactNode	Tip content (optional)
delay	number	Time in milliseconds to delay showing the loading state (optional)
wrapperClassName	string	Wrapper element class name (optional)
indicator	SpinIndicator	Custom loading indicator (optional)
children	React.ReactNode	Child elements (optional)