@rn-components-kit/skeleton v1.0.1

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

Props

• style
• avatar
• title
• paragraph

Reference

Props

style

Allows you to customize style

avatar

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

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)

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)

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

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)