@feizheng/react-loading

react-loading

Spinner component for react.

installation

npm install -S @feizheng/react-loading

update

npm update @feizheng/react-loading

properties

Name	Type	Required	Default	Description
mainClassName	string	false	'webkit-sassui-loading'	The loading key effect css className.
backdrop	union	false	-	Backdrop props or not display backdrop.

usage

1. import css

@import "~@feizheng/webkit-sassui-backdrop";
@import "~@feizheng/webkit-sassui-loading";
@import "~@feizheng/react-loading/dist/style.scss";

// customize your styles:
$react-loading-options: ()

2. import js

import ReactLoading from '@feizheng/react-loading';
import ReactDOM from 'react-dom';
import React from 'react';
import { ReactVisibleController } from '@feizheng/react-visible';
import './assets/style.scss';

class App extends React.Component {
  state = {
    value: false
  };

  componentDidMount() {
    // global config
    this.appLoading = new ReactVisibleController(ReactLoading, {
      children: 'loading',
      backdrop: {
        transparent: true,
        onClick: () => {
          this.appLoading.dismiss();
        }
      }
    });
  }

  render() {
    return (
      <div className="app-container">
        <button
          className="button"
          onClick={(e) => {
            this.appLoading.present(() => {
              console.log('present.');
            });
          }}>
          Show Loading.
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

• https://afeiship.github.io/react-loading/

license

Code released under the MIT license.