@toast-loadings/react v0.1.0

Toast Loading

Toast Loading for React.

• English
• 简体中文
• Vue3

Installation

$ npm i -save @toast-loadings/react

or

$ yarn add @toast-loadings/react

Quick Start

import { resetDefaultOptions, setDefaultOptions, hideLoading, showLoading } from '@toast-loadings/react';

// reset global current default options
resetDefaultOptions();

// set global default options
setDefaultOptions({
  type: 'circular',
  duration: 10 * 1000,
  ...others
});

// Show Loading
showLoading('Loading...');

// Show Loading（with object）
showLoading({ position: 'bottom', message: 'Loading...' });

// Hide Loading
hideLoading();

Options

interface Options {
  // The loading icon type ('circular', 'scale', 'spinner', 'spinner2'), defaults is 'spinner', and can be customized via the slot icon when the component is invoked
  type?: string;
  // Display position ('top', 'middle', 'bottom'), default is 'middle'
  position?: string;
  // Display duration, should be >= 0, default is 0
  duration?: number;
  // Whether to disable clicks on all elements during display
  forbidClick?: boolean;
  // Custom class name
  className?: string | object;
  // Custom z-index level. If not set, global auto-incrementing level(from 5000) will be used
  zIndex?: number;
  // Custom message
  message?: string;
  // Custom class name for message
  messageClassName?: string | object;
  // Custom style for message
  messageStyle?: string | object;
  // Whether to show loading icon, default is true
  showIcon?: boolean;
  // Custom color for loading icon
  iconColor?: string;
  // Custom size for loading icon
  iconSize?: string;
  // Custom class name for loading icon
  iconClassName?: string | object;
  // Custom style for loading icon
  iconStyle?: string | object;
}

Component usage

import React from 'react';
import {
  Circular,
  Scale,
  Spinner,
  Spinner2,
  ToastLoading
} from '@toast-loadings/react';

const App = () => {
  return (
    <div>
      <ToastLoading position="bottom" message="Loading..."/>
      <Circular color="#333" size="40px"/>
      <Scale color="#444" size="40px"/>
      <Spinner color="#555" size="40px"/>
      <Spinner2 color="#666" size="40px"/>
    </div>
  );
}

export default App;

Example project

A React18 + TS example project.

Project dir

$ cd example

Project setup

$ npm install

or

$ yarn install

Compiles and hot-reloads for development

$ npm run dev

or

$ yarn dev