react-skeleton

Documentation & Examples

Install

$ npm i @m860/react-skeleton --save

Import

import '@m860/react-skeleton/css/skeleton.css'
import {SkeletonView,Skeleton} from '@m860/react-skeleton'

Example

Test.js

class Test extends PureComponent {
	static propTypes = {
		title: PropTypes.string,
		show: PropTypes.bool
	};

	render() {
		return (
			<SkeletonView show={this.props.show}>
				<div style={{backgroundColor:"#eaebed",padding:10}}>
					<Skeleton>
						<span className="test">{this.props.title}</span>
					</Skeleton>
				</div>
			</SkeletonView>
		);
	}
}

App.js

class App extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			show: false,
			title: "hello world!"
		};
	}

	render() {
		return (
			<div>
				<button type="button" onClick={() => {
					this.setState(Object.assign({}, {
						show: true,
						title:"-------------------"
					}), () => {
						setTimeout(() => {
							this.setState(Object.assign({}, {
								show: false,
								title:'hello world!'
							}))
						}, 2000)
					})
				}}>fetch data
				</button>
				<Test title={this.state.title} show={this.state.show}/>
			</div>
		);
	}
}

screenshot