antd-spin v2.0.1

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

SpinProps