1.15.2 • Published 1 year ago

@squiz/xaccel-skeleton-loading

Licence

ISC

Version

1.15.2

Deps

Size

15 kB

Vulns

Weekly

Summary Dependency Versions

The SkeletonLoading component is a versatile and user-friendly UI element designed to enhance the user experience during data loading periods. It provides a visual placeholder that mimics the structure of the content being loaded, offering a seamless transition and reducing perceived loading times.

Properties

Property	Property description	Property type	Default value
`width`	width	string or number	100%
`height`	height	string or number	1rem
`borderRadius`	The border radius style	string or number	0.25rem
`style`	Additional styles to add to element	CSSProperties
`className`	Overwrite ClassName	classNameOverride

Usage

Default

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading />

Custom size

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading  width={150} height={30} />

Circle

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading type='circle' width={50} height={50} />

Additional styles

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading style={{ borderRadius: 10 }}/>

Additional class

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading
    className={{
        className: 'item',
        cssModule: styles,
        retainMissingModuleClasses: true,
    }} />

For more information about className please visit packages/utility/functions/src/generateClasses.js