Skeleton API

API documentation for Skeleton component

Skeleton#

Props#

Defines valid properties in Skeleton component.

nametypedefaultdescription
refRef<unknown>
null
The reference to the component instance.
pIfboolean
true
Whether the component should be rendered.
styleCSSProperties | ((instance?: SkeletonInstance) => CSSProperties)
null
The style to apply to the component.
classNamestring | ((instance?: SkeletonInstance) => string)
null
The class name to apply to the component.
asstring | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode>
null
The component type to render.
asChildboolean
false
Whether the component should be rendered as a child component.
ptSafeRecord<SkeletonPassThrough>
null
The pass-through props to pass to the component
ptOptionsPassThroughOptions
null
The pass-through options to pass to the component
unstyledboolean
null
Whether the component should be rendered without classes.
dtunknown
null
The design token to use for the component.
stylesStylesOptions<ComponentInstance>
null
The styles to use for the component.
childrenReactNode | ((instance: SkeletonInstance) => ReactNode)
null
The children to render.
shape"circle" | "rectangle"
rectangle
Shape of the element.
sizestring
null
Size of the Circle or Square.
widthstring
100%
Width of the element.
heightstring
1rem
Height of the element.
borderRadiusstring
null
Border radius of the element, defaults to value from theme.
animation"none" | "wave"
wave
Type of the animation.
[key: string]any
null
pt-{optionName}-*-
null
Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

Defines passthrough(pt) options of Skeleton component.

nametypedefaultdescription
rootSkeletonPassThroughType<HTMLAttributes<HTMLDivElement>>
null
Used to pass attributes to the root's DOM element.

Types#

Instance of Skeleton component.

values
ComponentInstance<SkeletonProps, SkeletonState, SkeletonExposes>

useSkeleton#

Types#

Instance of useSkeleton headless.

values
HeadlessInstance<useSkeletonProps, useSkeletonState, useSkeletonExposes>