【免费下载链接】react-placeholderA React component to easily replicate your page with nice placeholders while the content is loading项目地址https://gitcode.com/gh_mirrors/re/react-placeholder点击查看免费下载react-placeholder 是一个轻量级 React 骨架屏Skeleton Screen组件在页面内容加载期间用优雅的灰色占位块复制你的页面布局本文重点讲解customPlaceholder属性以及如何用TextBlock、MediaBlock、RectShape、RoundShape等内置组件拼出完全贴合你页面结构的专属加载占位效果。快速上手一条命令安装 react-placeholder安装非常简单一条 npm 命令搞定npm install --save react-placeholder基本用法是把你的真实组件包在ReactPlaceholder里通过ready属性控制显示占位块 / 显示真实内容import ReactPlaceholder from react-placeholder; import react-placeholder/lib/reactPlaceholder.css; ReactPlaceholder typemedia rows{7} ready{this.state.ready} MyComponent / /ReactPlaceholder核心逻辑就一行ready为true时渲染子组件为false时渲染占位符见 src/ReactPlaceholder.tsx。5 种内置占位类型一览ReactPlaceholder通过type属性内置了 5 种占位形态源码映射关系在 src/placeholders/index.tstype 值对应组件渲染类名适用场景textTextBlocktext-block段落文字默认类型mediaMediaBlockmedia-block头像 文字列表textRowTextRowtext-row单行文字条rectRectShaperect-shape图片、卡片、按钮块roundRoundShaperound-shape圆形头像各类型的最小示例可参考 examples/Examples.md。几个值得了解的默认值来自 src/ReactPlaceholder.tsxtype默认textrows默认3color默认#CDCDCDTextBlock每行宽度在 97%、100%、94%、90% 之间轮换模拟真实段落的错落感见 src/placeholders/TextBlock.tsxMediaBlock内部是RoundShape55px 圆形头像TextBlock的组合见 src/placeholders/MediaBlock.tsxcustomPlaceholder 自定义占位符写法 当内置类型不够用时customPlaceholder属性允许你传入任意 ReactElement作为占位内容。这是 react-placeholder 最强大的能力ReactPlaceholder ready{this.state.ready} customPlaceholder{MyCustomPlaceholder /} MyComponent / /ReactPlaceholder实现原理组件内部会判断customPlaceholder是否有效若有效则用React.cloneElement合并 className 后直接渲染它跳过内置类型选择见 src/ReactPlaceholder.tsx。 注意传入customPlaceholder时type、rows、color这几个属性就不再起作用了类型定义中三者互斥见 src/ReactPlaceholder.tsx。组合内置组件拼出专属骨架屏更灵活的玩法是直接从react-placeholder/lib/placeholders导入内置组件像搭积木一样组装自己的占位结构完整示例见 README.mdimport {TextBlock, MediaBlock, TextRow, RectShape, RoundShape} from react-placeholder/lib/placeholders; const awesomePlaceholder ( div classNamemy-awesome-placeholder RectShape colorblue style{{width: 30, height: 80}}/ TextBlock rows{7} coloryellow/ /div ); ReactPlaceholder ready{this.state.ready} customPlaceholder{awesomePlaceholder} MyComponent / /ReactPlaceholder三个常用积木的特性按需查阅源码RectShape/RoundShape纯色块通过style控制宽高圆形头像、商品图占位都很顺手见 src/placeholders/RoundShape.tsxTextBlock支持rows行数、lineSpacing行距、widths每行宽度数组三个属性见 src/placeholders/TextBlock.tsxTextRow单条文字占位行maxHeight、lineSpacing可调见 src/placeholders/TextRow.tsx实践建议让占位结构尽量与真实页面同构相同布局、相近宽高这样内容加载完成后视觉几乎无跳动用户体验最好。常用 props 速查控制延迟与动画属性类型 / 默认值作用readyboolean必传true显示真实内容false显示占位符delaynumber默认 0从内容就绪切回占位前的等待毫秒数避免快速网络下的闪屏firstLaunchOnlyboolean为true时占位符只渲染第一次加载后续切回false也不再显示showLoadingAnimationboolean开启默认脉冲动画type/rows/colortext/ 3 /#CDCDCD内置占位的类型、行数、颜色className/style字符串 / 对象自定义样式也可用内置类名text-block等覆盖样式关于 ⚡delay的一个细节它不影响首次渲染只对后续ready状态从true变false生效设置firstLaunchOnly为true同样会禁用该行为实现见 src/ReactPlaceholder.tsx。关于 ✨ 动画脉冲动画定义在独立 CSS 文件中先import react-placeholder/lib/reactPlaceholder.css再传showLoadingAnimation即可动画选择器会同时作用于占位容器内部的所有text-row、rect-shape、round-shape见 src/reactPlaceholder.scss。新手常见问题 FAQ问customPlaceholder和type可以同时传吗不建议。二者互斥传了customPlaceholder后type、rows、color会被忽略。问想让不同页面用同一套自定义占位怎么办把积木组件封装成CardSkeleton、ListSkeleton等函数组件再作为customPlaceholder传入即可一处定义多处复用。问占位符的颜色怎么改内置类型用color属性自定义占位直接给积木组件传色值或用className/style覆盖。问它体积大吗dependencies为零依赖仅 React 作为 peerDependency见 package.json。总结ready一个布尔值驱动整个加载/就绪切换delay与firstLaunchOnly处理细节体验5 种内置type覆盖 90% 的通用场景customPlaceholder 内置积木组件TextBlock、MediaBlock、RectShape、RoundShape、TextRow可以拼出任何页面专属的骨架屏让占位结构与真实内容同构是体验优化的关键掌握以上几点你就可以在任何 React 项目里快速落地专业级的加载占位体验了。赞分享【免费下载链接】react-placeholderA React component to easily replicate your page with nice placeholders while the content is loading项目地址https://gitcode.com/gh_mirrors/re/react-placeholder点击查看免费下载相关推荐RSUITE Placeholder 占位符组件完全指南骨架屏加载态与三个子组件的实战配置RSUITE Placeholder 占位符组件完全指南骨架屏加载态与三个子组件的实战配置 Placeholder占位符是 RSUITE 提供的一组骨架屏前端UI组件rsuite Placeholder 占位符组件详解用 Placeholder.Paragraph graphimage 打造加载骨架屏rsuite Placeholder 占位符组件详解用 Placeholder.Paragraph graphimage 打造加载骨架屏 导读 Plac前端UI组件react-lazyload自定义占位符开发placeholder高级用法指南react lazyload自定义占位符开发placeholder高级用法指南 想要优化React应用的页面加载性能吗react lazyload的plac前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 react-placeholder 自定义占位符完全指南：用 customPlaceholder 与内置组件拼出专属骨架屏
【免费下载链接】react-placeholderA React component to easily replicate your page with nice placeholders while the content is loading项目地址https://gitcode.com/gh_mirrors/re/react-placeholder点击查看免费下载react-placeholder 是一个轻量级 React 骨架屏Skeleton Screen组件在页面内容加载期间用优雅的灰色占位块复制你的页面布局本文重点讲解customPlaceholder属性以及如何用TextBlock、MediaBlock、RectShape、RoundShape等内置组件拼出完全贴合你页面结构的专属加载占位效果。快速上手一条命令安装 react-placeholder安装非常简单一条 npm 命令搞定npm install --save react-placeholder基本用法是把你的真实组件包在ReactPlaceholder里通过ready属性控制显示占位块 / 显示真实内容import ReactPlaceholder from react-placeholder; import react-placeholder/lib/reactPlaceholder.css; ReactPlaceholder typemedia rows{7} ready{this.state.ready} MyComponent / /ReactPlaceholder核心逻辑就一行ready为true时渲染子组件为false时渲染占位符见 src/ReactPlaceholder.tsx。5 种内置占位类型一览ReactPlaceholder通过type属性内置了 5 种占位形态源码映射关系在 src/placeholders/index.tstype 值对应组件渲染类名适用场景textTextBlocktext-block段落文字默认类型mediaMediaBlockmedia-block头像 文字列表textRowTextRowtext-row单行文字条rectRectShaperect-shape图片、卡片、按钮块roundRoundShaperound-shape圆形头像各类型的最小示例可参考 examples/Examples.md。几个值得了解的默认值来自 src/ReactPlaceholder.tsxtype默认textrows默认3color默认#CDCDCDTextBlock每行宽度在 97%、100%、94%、90% 之间轮换模拟真实段落的错落感见 src/placeholders/TextBlock.tsxMediaBlock内部是RoundShape55px 圆形头像TextBlock的组合见 src/placeholders/MediaBlock.tsxcustomPlaceholder 自定义占位符写法 当内置类型不够用时customPlaceholder属性允许你传入任意 ReactElement作为占位内容。这是 react-placeholder 最强大的能力ReactPlaceholder ready{this.state.ready} customPlaceholder{MyCustomPlaceholder /} MyComponent / /ReactPlaceholder实现原理组件内部会判断customPlaceholder是否有效若有效则用React.cloneElement合并 className 后直接渲染它跳过内置类型选择见 src/ReactPlaceholder.tsx。 注意传入customPlaceholder时type、rows、color这几个属性就不再起作用了类型定义中三者互斥见 src/ReactPlaceholder.tsx。组合内置组件拼出专属骨架屏更灵活的玩法是直接从react-placeholder/lib/placeholders导入内置组件像搭积木一样组装自己的占位结构完整示例见 README.mdimport {TextBlock, MediaBlock, TextRow, RectShape, RoundShape} from react-placeholder/lib/placeholders; const awesomePlaceholder ( div classNamemy-awesome-placeholder RectShape colorblue style{{width: 30, height: 80}}/ TextBlock rows{7} coloryellow/ /div ); ReactPlaceholder ready{this.state.ready} customPlaceholder{awesomePlaceholder} MyComponent / /ReactPlaceholder三个常用积木的特性按需查阅源码RectShape/RoundShape纯色块通过style控制宽高圆形头像、商品图占位都很顺手见 src/placeholders/RoundShape.tsxTextBlock支持rows行数、lineSpacing行距、widths每行宽度数组三个属性见 src/placeholders/TextBlock.tsxTextRow单条文字占位行maxHeight、lineSpacing可调见 src/placeholders/TextRow.tsx实践建议让占位结构尽量与真实页面同构相同布局、相近宽高这样内容加载完成后视觉几乎无跳动用户体验最好。常用 props 速查控制延迟与动画属性类型 / 默认值作用readyboolean必传true显示真实内容false显示占位符delaynumber默认 0从内容就绪切回占位前的等待毫秒数避免快速网络下的闪屏firstLaunchOnlyboolean为true时占位符只渲染第一次加载后续切回false也不再显示showLoadingAnimationboolean开启默认脉冲动画type/rows/colortext/ 3 /#CDCDCD内置占位的类型、行数、颜色className/style字符串 / 对象自定义样式也可用内置类名text-block等覆盖样式关于 ⚡delay的一个细节它不影响首次渲染只对后续ready状态从true变false生效设置firstLaunchOnly为true同样会禁用该行为实现见 src/ReactPlaceholder.tsx。关于 ✨ 动画脉冲动画定义在独立 CSS 文件中先import react-placeholder/lib/reactPlaceholder.css再传showLoadingAnimation即可动画选择器会同时作用于占位容器内部的所有text-row、rect-shape、round-shape见 src/reactPlaceholder.scss。新手常见问题 FAQ问customPlaceholder和type可以同时传吗不建议。二者互斥传了customPlaceholder后type、rows、color会被忽略。问想让不同页面用同一套自定义占位怎么办把积木组件封装成CardSkeleton、ListSkeleton等函数组件再作为customPlaceholder传入即可一处定义多处复用。问占位符的颜色怎么改内置类型用color属性自定义占位直接给积木组件传色值或用className/style覆盖。问它体积大吗dependencies为零依赖仅 React 作为 peerDependency见 package.json。总结ready一个布尔值驱动整个加载/就绪切换delay与firstLaunchOnly处理细节体验5 种内置type覆盖 90% 的通用场景customPlaceholder 内置积木组件TextBlock、MediaBlock、RectShape、RoundShape、TextRow可以拼出任何页面专属的骨架屏让占位结构与真实内容同构是体验优化的关键掌握以上几点你就可以在任何 React 项目里快速落地专业级的加载占位体验了。赞分享【免费下载链接】react-placeholderA React component to easily replicate your page with nice placeholders while the content is loading项目地址https://gitcode.com/gh_mirrors/re/react-placeholder点击查看免费下载相关推荐RSUITE Placeholder 占位符组件完全指南骨架屏加载态与三个子组件的实战配置RSUITE Placeholder 占位符组件完全指南骨架屏加载态与三个子组件的实战配置 Placeholder占位符是 RSUITE 提供的一组骨架屏前端UI组件rsuite Placeholder 占位符组件详解用 Placeholder.Paragraph graphimage 打造加载骨架屏rsuite Placeholder 占位符组件详解用 Placeholder.Paragraph graphimage 打造加载骨架屏 导读 Plac前端UI组件react-lazyload自定义占位符开发placeholder高级用法指南react lazyload自定义占位符开发placeholder高级用法指南 想要优化React应用的页面加载性能吗react lazyload的plac前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
