@rn-components-kit/skeleton

Skeleton

English | 中文

Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet. It supports the following features:

• avatar, title, paragraph three parts all can be customized
• HOC component withSkeleton for you to fully customize skeleton

:warning: NOTE

If you use withSkeleton with decorator syntax, you should also install @babel/plugin-proposal-decorators.

How to use

npm install @rn-components-kit/skeleton --save

Preview	Code
	Demo1 Code
	Demo2 Code

Props

• style
• avatar
• title
• paragraph

Reference

Props

style

Allows you to customize style

Type	Required	Default
object	no	-

avatar

Show avatar placeholder (if false, avatar placeholder will not be shown)

Type	Required	Default
boolean | AvatarProps	no	true

AvatarProps

• style [object]: Allow you to customize avatar module's style
• size [number]: The width and height of avatar. (default 20)
• shape [enum('circle', 'square')]: The shape of avatar. (default 'circle')

title

Show title placeholder (if false, title placeholder will not be shown)

Type	Required	Default
boolean | TitleProps	no	true

TitleProps

• style [object]: Allow you to customize title block's style
• width [number | string]: The width of title block
• height [number]: The height of title block. (default 15)

paragraph

Show paragraph placeholder (if false, title paragraph will not be shown)

Type	Required	Default
boolean | ParagraphProps	no	true

ParagraphProps

• style [object]: Allow you to customize paragraph module's style
• rows [number]: The count of paragraph block lines. (default 3)
• widths [Array<number | string>]: An array of each block's width (if undefined or null, default 100%)
• heights [Array]: An array of each block's height (if undefined or null, default 15)

Props for withSkeleton

• options

Reference for withSkeleton

options

Config for skeleton

Type	Required	Default
withSkeletonOptions	no	{duraion: 1000, minOpacity: 0.2, maxOpacity: 1}

withSkeletonOptions

• duraion [number]: How long a loop animation lasts (default: 1000)
• minOpacity [number]: The minimum opacity value during animation (default: 0.2)
• maxOpacity [number]: The maximum opacity value during animation (default: 1)