1.0.4 • Published 3 years ago

react-skeleton-component v1.0.4

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

react-skeleton-component

react-skeleton-component是基于TypescriptReact Hooks封装的一个骨架屏组件,可在react项目中开箱即用。在页面数据加载完成前,先给用户展示出页面的大致结构(占位图),在拿到接口数据渲染出实际页面内容之后替换掉,这样不会造成网页长时间白屏或者闪烁,优化用户体验。

安装

// npm
$> npm install react-skeleton-component
// yarn
$> yarn add react-skeleton-component

快速入门 在 codesandbox 试试吧

import Skeleton from "react-skeleton-component";
    
export default function App() {
  ...
  ...// 定义一些变量或者执行一些操作blabla....
  ...
  
  return (
    <>
      <button onClick={handleClick.bind(null)}>button</button>
      // 数据没有请求回来之前展示占位图,请求回来展示真实数据
      <ul>
        {state.loading ? (
          <Skeleton className="item" count={10} /> 
        ) : (
          data.map((item) => (
            <li className="item" key={item.cell}>
              {item.name.title}
            </li>
          ))
        )}
        {state.error && <div>error</div>}
      </ul>
    </>
  );
}

react-skeleton-component组件有默认类名,设置了占位图的默认样式和动画效果,如果自带的效果不能满足需求的话,react-skeleton-component还有其他的一些可配置参数来满足不同的需求,具体看👇参数;

可配置参数

  • count: 可以展示几个占位图,number类型,默认为1;
  • width:占位图的宽度,number类型,默认为父元素宽度;
  • height:占位图的高度,number类型,默认为父元素高度;
  • circle: 占位图是否为圆形,boolean类型,默认为false;
  • className:类名,string类型,默认自带了“react-loading-skeleton”类名;
  • style:样式,React.CSSProperties类型,默认为空;
  • duration:渐变动画持续时间,number类型,默认为2s;
  • colorStart: 渐变动画的开始颜色,string类型,默认为空;
  • colorEnd:渐变动画的结束颜色,string类型,默认为空;
  • rem2px:传入的宽高是否需要转换成px,boolean类型,默认为false;
1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

0.1.0

7 years ago