ehome-react-skeleton

A Webpack loader that automatically generates the React skeleton screen.

The starting

The loading chart of chrysanthemum is too low, so the skeleton screen is more beautiful. Corporate UI is not willing to design skeleton screen images (in a small company, the UI is also less)! Later, I thought about whether the skeleton screen could be automatically generated through Webpack. After I got this idea, I started to design it. I found it was feasible, so I wrote a loader initially. I have been busy recently. After this period of time, I will optimize and improve it and output a stable version.

The installation

cnpm i ehome-react-skeleton --save

configuration

{
    test:/\.(js|jsx)$/,
    include:paths.src,
    use:[
        {
            loader: require.resolve("babel-loader"),
            options: {
                "presets": [
                    "react-app"
                ]
            }
        },
        {
            loader:require.resolve("ehome-react-skeleton") // configure ehome-react-skeleton before babel-loaderCopy the code

use

demo1

import React from "react"; import ReactDom from "react-dom"; import "./index.less"; const prefix = "eh-home"; export default class Skeleton extends React.Component { componentWillMount() { this.setState({ ownerHotLines: [{description: "中国人 ", name: "leiwuyi", contact: "15999650670"}]}); } render() { const { state, props } = this; return ( <div className={`${prefix}-ownerservice`}> <div> {state.ownerHotLines.map(hotline => { return <div className={`${prefix}-ownerservice`} SKELETON> <div className="block"> <div className="block-avatar"> <img /> </div> <div className="block-content"> <div className="block-content-title"> </div> <div className="block-content-contact"> <span style={{ marginRight: 20 }}>leiwuyi</span>15999650670 </div> </div> <div className="block-message"></div> <div className="block-phone"><a href="15999650670"></a></div> </div> </div> })} </div> {SKELETON} </div>; ) }}Copy the code

demo2

import React from "react"; import ReactDom from "react-dom"; import "./index.less"; // const prefix = "eh-record"; export default class Record extends React.Component { componentWillMount() { } render() { const { state, props } = this;  return <div className={`${prefix}`}> <div className={`${prefix}-block`} SKELETON> // (1) <div ClassName = ${prefix} {` - block - the header `} > < div > copy < / div > < div > paid < / div > < / div > < div className = ${prefix} {` - block - date `} > The 2012-2-08 < / div > < div className = ${prefix} {` - block - filemsg `} > < div > I ask. Word < / div > < div > $0.2 < / div > < / div > < / div > {SKELETON} </div>; }Copy the code
  1. index.lessfile
  2. divOn theSKELETONThe one marked is skeleton template
  3. The template will replace {SKELETON}

The effect

At the end

Github address: here