01-getting-started

All docs

Getting Started

Installation

bash
npm install auto-skeleton-react

Peer dependencies: React 18+

Basic Usage

Wrap any component with AutoSkeleton and control it with the loading prop:

tsx
import { useState } from 'react';import { AutoSkeleton } from 'auto-skeleton-react';function UserProfile() {  const [loading, setLoading] = useState(true);  // Simulate data fetch  useEffect(() => {    fetchUser().then(() => setLoading(false));  }, []);  return (    <AutoSkeleton loading={loading}>      <div style={{ display: 'flex', gap: 16 }}>        <img src={user.avatar} style={{ width: 80, height: 80, borderRadius: '50%' }} />        <div>          <h2>{user.name}</h2>          <p>{user.bio}</p>          <button>Follow</button>        </div>      </div>    </AutoSkeleton>  );}

That's it. No skeleton components to create, no layout to duplicate.

What Happens

  1. When loading={true}, AutoSkeleton renders your children invisibly
  2. It walks the DOM tree, measures every element's size, position, and style
  3. Heuristics classify each leaf element (text, image, button, input, icon)
  4. A skeleton overlay is rendered matching the exact layout
  5. When loading={false}, the skeleton fades out and real content appears

With Custom Config

tsx
<AutoSkeleton  loading={loading}  config={{    animation: 'pulse',    baseColor: '#e0e0e0',    borderRadius: 8,  }}>  <MyComponent /></AutoSkeleton>

See Configuration for all options.

TypeScript

The package ships with full TypeScript definitions. All types are exported:

tsx
import { AutoSkeleton } from 'auto-skeleton-react';import type { SkeletonConfig, SkeletonNode } from 'auto-skeleton-react';

Next Steps