@jswork/react-spinner v1.0.0

react-spinner

Spinner for react.

installation

npm install -S @jswork/react-spinner

properties

usage

1. import css

   @import "~@jswork/react-spinner/dist/style.css";
   
   // or use sass
   @import "~@jswork/react-spinner/dist/style.scss";
   
   // customize your styles:
   $react-spinner-options: ()

2. import js

   import ReactDemokit from '@jswork/react-demokit';
   import React from 'react';
   import ReactDOM from 'react-dom';
   import ReactSpinner from '@jswork/react-spinner';
   import './assets/style.scss';
   
   import musicSvg from './assets/music-1080px.svg';
   import wedgesSvg from './assets/wedges-2.9s-108px.svg';
   
   class App extends React.Component {
     constructor(inProps) {
       super(inProps);
       this.state = {
         loading: false,
         svg: musicSvg
       };
     }
   
     handleClick1 = (inEvent) => {
       const { loading } = this.state;
       this.setState({ loading: !loading, svg: musicSvg });
     };
   
     handleClick2 = (inEvent) => {
       const { loading } = this.state;
       this.setState({ loading: !loading, svg: wedgesSvg });
     };
   
     render() {
       const { loading, svg } = this.state;
   
       return (
         <ReactDemokit
           className="p-3 app-container"
           url="https://github.com/afeiship/react-spinner">
           <button
             className="button mb-2 is-fullwidth is-primary"
             onClick={this.handleClick1}>
             Toggle Loading - Music
           </button>
           <button
             className="button mb-2 is-fullwidth is-info"
             onClick={this.handleClick2}>
             Toggle Loading - WedgesSvg
           </button>
           <ReactSpinner value={loading} indicator={<img src={svg} />}>
             <img
               hidden
               width="100%"
               src="https://yt-adp.ws.126.net/linxue/7001123_axeu_20191122.jpg"
             />
             <img
               width="100%"
               src="http://cms-bucket.ws.126.net/2019/11/25/886cba5835d2491798fe3d6584778129.png"
             />
           </ReactSpinner>
         </ReactDemokit>
       );
     }
   }
   
   ReactDOM.render(<App />, document.getElementById('app'));

documentation

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

license

Code released under the MIT license.