@auto-skeleton/react 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +26 -2
  2. package/dist/index.cjs +1 -0
  3. package/dist/index.js +2 -0
  4. package/package.json +3 -2
package/README.md CHANGED
@@ -1,6 +1,14 @@
1
1
  # auto-skeleton
2
2
 
3
- Zero-config skeleton loaders for React. Wraps any component and auto-generates a pixel-accurate skeleton by scanning the real DOM — no manual shape definitions needed.
3
+ [![npm](https://img.shields.io/npm/v/@auto-skeleton/react?label=npm&color=cb3837)](https://www.npmjs.com/package/@auto-skeleton/react)
4
+ [![downloads](https://img.shields.io/npm/dm/@auto-skeleton/react?color=blue)](https://www.npmjs.com/package/@auto-skeleton/react)
5
+ [![stars](https://img.shields.io/github/stars/riazzahmedm/react-auto-skeleton?style=flat&color=yellow)](https://github.com/riazzahmedm/react-auto-skeleton/stargazers)
6
+ [![issues](https://img.shields.io/github/issues/riazzahmedm/react-auto-skeleton)](https://github.com/riazzahmedm/react-auto-skeleton/issues)
7
+ [![license](https://img.shields.io/github/license/riazzahmedm/react-auto-skeleton)](https://github.com/riazzahmedm/react-auto-skeleton/blob/main/LICENSE)
8
+
9
+ Zero-config skeleton loaders for React. Wrap any component — auto-skeleton scans the live DOM at runtime and generates a pixel-accurate skeleton. No CLI, no build step, no JSON files to maintain.
10
+
11
+ **[Live demo →](https://riazzahmedm.github.io/react-auto-skeleton/)**
4
12
 
5
13
  ```tsx
6
14
  <AutoSkeleton id="profile" loading={isLoading}>
@@ -8,7 +16,23 @@ Zero-config skeleton loaders for React. Wraps any component and auto-generates a
8
16
  </AutoSkeleton>
9
17
  ```
10
18
 
11
- When `loading` is true, the real UI is replaced with a skeleton that mirrors its exact layout.
19
+ That's it. No shape definitions, no extra config.
20
+
21
+ ---
22
+
23
+ ## Why auto-skeleton
24
+
25
+ Most skeleton libraries make you define shapes manually — rectangles, circles, line counts — by hand. Others require a CLI build step to snapshot your UI into a static file you have to keep in sync.
26
+
27
+ auto-skeleton does neither. It measures your real rendered DOM with `getBoundingClientRect` at runtime, so skeletons are always accurate and always up to date — even as your layout changes.
28
+
29
+ | | auto-skeleton | Manual shapes | CLI snapshot tools |
30
+ |---|:---:|:---:|:---:|
31
+ | Zero config | ✅ | ❌ | ✅ |
32
+ | No build step | ✅ | ✅ | ❌ |
33
+ | Always in sync with layout | ✅ | ❌ | ❌ |
34
+ | Adapts to dynamic content | ✅ | ❌ | ❌ |
35
+ | Cached for instant re-loads | ✅ | — | ✅ |
12
36
 
13
37
  ---
14
38
 
package/dist/index.cjs CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
package/dist/index.js CHANGED
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  // src/SkeletonOverlay.tsx
2
4
  import { jsx } from "react/jsx-runtime";
3
5
  function SkeletonOverlay({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auto-skeleton/react",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -12,6 +12,7 @@
12
12
  },
13
13
  "./styles.css": "./dist/styles.css"
14
14
  },
15
+ "license": "MIT",
15
16
  "files": [
16
17
  "dist",
17
18
  "README.md"
@@ -28,6 +29,6 @@
28
29
  "react-dom": ">=18"
29
30
  },
30
31
  "dependencies": {
31
- "@auto-skeleton/core": "0.0.3"
32
+ "@auto-skeleton/core": "0.0.5"
32
33
  }
33
34
  }