useSkeleton

Hook that provides data attributes for building custom placeholder loading elements.

basic-demo

Usage#

import { useSkeleton } from '@primereact/headless/skeleton';
 
const { rootProps } = useSkeleton();
 
return <div {...rootProps} aria-hidden="true" />;

useSkeleton returns spread-ready rootProps with data attributes — see Primitive for a component-based API.

Features#

Returns spread-ready rootProps with data-scope and data-part attributes
Zero-state hook — no internal state or side effects
Full control over shape, size, and animation via your own CSS

Behavior#

Shapes and Sizes#

Apply shape and dimension styles directly via CSS or utility classes. The hook does not manage visual properties.

const { rootProps } = useSkeleton();
 
{
    /* Circle */
}
<div {...rootProps} className="w-12 h-12 rounded-full bg-gray-200 animate-pulse" aria-hidden="true" />;
 
{
    /* Rectangle */
}
<div {...rootProps} className="w-full h-4 rounded bg-gray-200 animate-pulse" aria-hidden="true" />;

Animation#

Implement animation using CSS classes. The hook does not handle animation state.

<div {...rootProps} className="bg-gray-200 animate-pulse" aria-hidden="true" />

Custom Styling with Data Attributes#

The root prop object includes data-scope="skeleton" and data-part="root" for targeted styling.

[data-scope='skeleton'][data-part='root'] {
    background-color: #e5e7eb;
    animation: pulse 1.5s ease-in-out infinite;
}
 
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

API#

useSkeleton#

Name	Type	Default

Accessibility#

See Skeleton Primitive for WAI-ARIA compliance details and keyboard support.