r-skeleton

介绍

r-skeleton 是 React 版的自动骨架屏生成组件。在编译时生成骨架屏代码，可实时预览以及修改。其核心原理是在 render 阶段多渲染一份骨架屏 dom 节点（避免直接修改操作原始 dom，产生其他问题），然后通过 css 样式控制骨架屏页显隐，达到实时预览的效果。在遍历页面节点元素时，针对 svg、img、input 等特殊节点做了处理。并且只对 background-image 和 text 文本节点做背景上色处理，达到骨架屏效果。

📦 安装

npm install r-skeleton --save

yarn add r-skeleton

🔨 示例

import { Skeleton } from "r-skeleton";

const App = () => {
    return (
      <Skeleton className="skeletons" backgroundColor="rgb(222, 222, 200)">
        <div>
          <h2>自动骨架屏生成组件</h2>
          <p data-skeleton-ignore>该节点元素会被忽略</p>
          <p data-skeleton-remove>该节点元素会被移除</p>
          <p data-skeleton-empty>该节点元素内容会被清空</p>
        </div>
      </Skeleton>
    )
};

Props 属性值

参数名称	必填	默认值	说明
isProduction	否	-	是否为生产环境（生产环境不走骨架屏）
backgroundColor	否	rgb(238, 238, 238)	骨架屏背景色
quality	否	0.9	生成的图片压缩质量
className	否	skeleton-container	骨架屏节点类名
children	是	null	ReactNode

Dom 节点属性

参数名称	说明
data-skeleton-remove	指定进行移除的 dom 节点属性
data-skeleton-ignore	指定忽略不进行任何处理的 dom 节点属性
data-skeleton-empty	将某dom的innerHTML置为空字符串