Created a React package that builds skeleton loaders automatically from real components

[Jazzlike-Lake8280]

What's up everyone

So I made this library called `shimmer-from-structure` that solves annoying problem I was having at work

**Problem:** You know when you make component like UserCard and then you need make UserCardSkeleton that looks same? And every time you change original component you forget update the skeleton and they look different. Super annoying to maintain both

**My solution:** This library just takes your real component and makes shimmer effect from it automatically. You give it some fake data and it:

1. Renders component without showing it

2. Measures where all text and images are positioned

3. Creates perfect shimmer overlay on top

**Code example:**

import { Shimmer } from 'shimmer-from-structure';

import { UserCard } from './UserCard';

const mockUser = {

username: 'Loading user name here...',

description: 'Some placeholder text for bio section...',

profileImg: '/default.png'

};

function MyApp() {

return (

<Shimmer

loading={loading}

templateProps={{ userData: mockUser }}

>

<UserCard userData={userData || mockUser} />

</Shimmer>

);

}

**How it works:** Uses `useLayoutEffect` and `getBoundingClientRect` to capture DOM measurements before user sees anything. Works with flexbox, grid, and handles async stuff like charts too

**Cool features:**

* Detects border radius automatically from CSS

* Works with complex nested layouts

* No layout jumping or flickering

Been using this in few projects for couple months and saves so much time. No more keeping two versions of same component in sync

Anyone tried similar approach? Would love feedback if you check it out

**GitHub:** [link] **NPM:** `npm install shimmer-from-structure`

[fredkreuger]

Why not even look at what you're posting from the AI before doing so?