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
- 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: ()
- 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
license
Code released under the MIT license.