react-generate-skeleton

Pixel-perfect skeleton loading screens, extracted from your real DOM. No manual measurement, no hand-tuned placeholders.

How it works

1. Wrap your component with <Skeleton> and give it a name
2. Run npx react-generate-skeleton build — it snapshots the DOM and generates bones
3. Import the registry once — every skeleton auto-resolves

import { Skeleton } from 'react-generate-skeleton'

function BlogPage() {
  const { data, isLoading } = useFetch('/api/post')

  return (
    <Skeleton name="blog-card" loading={isLoading}>
      {data && <BlogCard data={data} />}
    </Skeleton>
  )
}

npx react-generate-skeleton build

// app/layout.tsx — add once
import './bones/registry'

Done. Every <Skeleton name="..."> shows a pixel-perfect skeleton on load.

Install

npm install react-generate-skeleton

What it does

• Reads getBoundingClientRect() on every visible element in your component
• Stores positions as a flat array of { x, y, w, h, r } bones
• Renders them as gray rectangles that match your real layout exactly
• Responsive — captures at multiple breakpoints (375px, 768px, 1280px by default)
• Pulse animation shimmers to a lighter shade of whatever color you set

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | required | Unique name for this skeleton | | loading | boolean | required | Show skeleton or real content | | color | string | #e0e0e0 | Bone fill color | | animate | boolean | true | Pulse animation | | snapshotConfig | object | — | Control which elements are included |

CLI

npx react-generate-skeleton build                    # auto-detect dev server
npx react-generate-skeleton build http://localhost:3000
npx react-generate-skeleton build --breakpoints 390,820,1440 --out ./public/bones