r-skeleton v1.0.1

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 属性值

Dom 节点属性