useSkeleton()

For when you want to render a custom skeleton — not the auto-measured one — but still want the lifecycle helpers: stable loading state with minDuration, a11y bindings, etc.

import { useSkeleton } from '@kenildev007/skeleto';

function MyComponent({ loading }) {
  const { isSkeleton, bind } = useSkeleton({ loading, minDuration: 400 });

  return (
    <div {...bind}>
      {isSkeleton ? <MyCustomBones /> : <RealContent />}
    </div>
  );
}

Returns

  • isSkeleton — true while loading (respects minDuration)
  • bind — props to spread on your wrapper for a11y (aria-busy, aria-live)

Live demo