Xy-loading-react NPM

xy-loading-react

英语不好，文档里的英文版是谷歌翻译的，如果不准确请见谅
xy-loading-react是一个为react项目提供多种样式的loading动画和加载占位图的模块
loading动画/加载占位图样式会持续增加，欢迎补充和提需求
English is not good, the English version of the document is Google translation, if not accurate, please forgive me
xy-loading-react is a multi-style loading animation for react projects and a module for loading bitmaps
loading animation / loading bitmap style will continue to increase, are welcome to add and demand

安装 Installation

$ npm i xy-loading-react --save

使用 Usage

// 引入 Introduced
import XyLoading from 'xy-loading-react';

// 调用 transfer
<XyLoading type="skeleton1" visibility="true"/>

参数 Available Props

prop	类型 type	默认值 default value	说明 description
type	string	skeleton1	Loaidng动画和加载占位图的类型
visibility	bool	true	该组件是否可见

例子 examples

import React from 'react';
import XyLoading from 'xy-loading-react';

export default class MyComponent extends React.Component{
  
 constructor(props,that) {
     super(props);
     this.state = {
         loadingVisibility:true, 
     };
  }
  
  componentWillMount(){
    
      // 在数据请求完毕后，修改state中XyLoading的可见性
      // After the data request is completed, modify the visibility of XyLoading in state
    
      this.setState({
          loadingVisibility:false, 
      })
      
  }
  
  render(){
    
    // 根据state中的loadingVisibility判断数据是否加载完毕
    // 若加载完则正常显示内容，若未加载完则显示XyLoading
    
    // According to loadingVisibility state to determine whether the data is loaded
    // If loaded finished the normal display, if not loaded then display XyLoading
    
    if(!this.state.loadingVisibility){
        return (
    	  <div>
        	 {this.state.content}
          </div>
        )
    }else{
        return (
    	  <XyLoading type="skeleton1" visibility={this.state.loadingVisibility} />
        )
    }
    
  }
}