1.0.4 • Published 3 years ago
react-skeleton-component v1.0.4
react-skeleton-component
react-skeleton-component是基于Typescript和React 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;