instaskeleton 0.1.0 → 0.1.1
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.
- package/README.md +46 -15
- package/package.json +30 -5
package/README.md
CHANGED
|
@@ -1,28 +1,51 @@
|
|
|
1
1
|
# instaskeleton
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[](https://bundlephobia.com/package/instaskeleton)
|
|
5
|
-
[](https://github.com/LittleBoy9/instaskeleton/blob/main/LICENSE)
|
|
3
|
+
> Ultra-light React skeleton loader with zero DOM scanning — the fastest way to add loading states to your React app
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/instaskeleton)
|
|
6
|
+
[](https://bundlephobia.com/package/instaskeleton)
|
|
7
|
+
[](https://www.npmjs.com/package/instaskeleton)
|
|
8
|
+
[](https://github.com/LittleBoy9/instaskeleton/blob/main/LICENSE)
|
|
9
|
+
[](https://www.typescriptlang.org/)
|
|
10
|
+
|
|
11
|
+
**instaskeleton** is the lightest React skeleton loading library that doesn't scan your DOM. Perfect for building fast, responsive loading states in React applications with shimmer animations, pulse effects, and automatic JSX inference.
|
|
8
12
|
|
|
9
13
|
```
|
|
10
|
-
~1.2 KB
|
|
14
|
+
~1.2 KB JS + ~0.45 KB CSS = ~1.65 KB gzipped (total)
|
|
11
15
|
```
|
|
12
16
|
|
|
17
|
+
## Table of Contents
|
|
18
|
+
|
|
19
|
+
- [Features](#why-instaskeleton)
|
|
20
|
+
- [Installation](#install)
|
|
21
|
+
- [Quick Start](#quick-start)
|
|
22
|
+
- [Manual Schema](#manual-schema)
|
|
23
|
+
- [HOC Pattern](#hoc-pattern)
|
|
24
|
+
- [API Reference](#api-reference)
|
|
25
|
+
- [Performance](#performance)
|
|
26
|
+
- [Examples](#example-app)
|
|
27
|
+
- [Browser Support](#browser-support)
|
|
28
|
+
- [License](#license)
|
|
29
|
+
|
|
13
30
|
## Why instaskeleton?
|
|
14
31
|
|
|
15
|
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
32
|
+
**The problem with other React skeleton loaders:**
|
|
33
|
+
- They require separate skeleton components for every UI element (tedious)
|
|
34
|
+
- They scan the DOM at runtime to generate placeholders (slow, causes layout shifts)
|
|
35
|
+
- They bloat your bundle with unnecessary dependencies
|
|
36
|
+
|
|
37
|
+
**instaskeleton solves this differently:**
|
|
18
38
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
39
|
+
| Feature | Benefit |
|
|
40
|
+
|---------|----------|
|
|
41
|
+
| ⚡ **Zero DOM scanning** | No runtime layout measurement, no CLS issues |
|
|
42
|
+
| 🚀 **Zero work when not loading** | Early exit skips all computation |
|
|
43
|
+
| 🎯 **Automatic JSX inference** | Skeleton shapes generated from your React component tree |
|
|
44
|
+
| 📐 **Manual schema mode** | Pixel-perfect control when you need exact layouts |
|
|
45
|
+
| 💾 **Smart LRU caching** | Repeated renders are instant (100-entry limit) |
|
|
46
|
+
| 🎨 **Multiple animations** | Shimmer, pulse, or none — GPU accelerated |
|
|
47
|
+
| ♿ **Accessibility first** | Respects `prefers-reduced-motion` automatically |
|
|
48
|
+
| 📦 **Tiny bundle** | Only ~1.65KB gzipped total |
|
|
26
49
|
|
|
27
50
|
## Install
|
|
28
51
|
|
|
@@ -287,10 +310,18 @@ npm run example:dev # Run example app
|
|
|
287
310
|
- Firefox 78+
|
|
288
311
|
- Safari 14+
|
|
289
312
|
|
|
313
|
+
## Keywords
|
|
314
|
+
|
|
315
|
+
react skeleton, skeleton loader, react loading, loading placeholder, shimmer animation, react placeholder, skeleton screen, loading state, react ui components, typescript skeleton, lightweight skeleton loader, zero dom scanning, jsx inference
|
|
316
|
+
|
|
290
317
|
## License
|
|
291
318
|
|
|
292
319
|
MIT © [LittleBoy9](https://github.com/LittleBoy9)
|
|
293
320
|
|
|
321
|
+
---
|
|
322
|
+
|
|
323
|
+
**Found this useful?** Give it a ⭐ on [GitHub](https://github.com/LittleBoy9/instaskeleton)!
|
|
324
|
+
|
|
294
325
|
## Notes
|
|
295
326
|
|
|
296
327
|
- Inference walks the React element tree, not the rendered DOM.
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "instaskeleton",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Ultra-light React skeleton
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Ultra-light React skeleton loader with zero DOM scanning. Automatic JSX inference, manual schema support, shimmer & pulse animations. Only ~1.65KB gzipped.",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"author":
|
|
6
|
+
"author": {
|
|
7
|
+
"name": "Sounak Das",
|
|
8
|
+
"url": "https://github.com/LittleBoy9"
|
|
9
|
+
},
|
|
7
10
|
"repository": {
|
|
8
11
|
"type": "git",
|
|
9
12
|
"url": "https://github.com/LittleBoy9/instaskeleton.git"
|
|
@@ -11,7 +14,11 @@
|
|
|
11
14
|
"bugs": {
|
|
12
15
|
"url": "https://github.com/LittleBoy9/instaskeleton/issues"
|
|
13
16
|
},
|
|
14
|
-
"homepage": "https://github.
|
|
17
|
+
"homepage": "https://littleboy9.github.io/instaskeleton/",
|
|
18
|
+
"funding": {
|
|
19
|
+
"type": "github",
|
|
20
|
+
"url": "https://github.com/sponsors/LittleBoy9"
|
|
21
|
+
},
|
|
15
22
|
"type": "module",
|
|
16
23
|
"main": "./dist/index.cjs",
|
|
17
24
|
"module": "./dist/index.js",
|
|
@@ -40,10 +47,28 @@
|
|
|
40
47
|
},
|
|
41
48
|
"keywords": [
|
|
42
49
|
"skeleton",
|
|
50
|
+
"skeleton-loader",
|
|
51
|
+
"skeleton-loading",
|
|
52
|
+
"skeleton-screen",
|
|
43
53
|
"react",
|
|
54
|
+
"react-skeleton",
|
|
55
|
+
"react-loading",
|
|
56
|
+
"react-placeholder",
|
|
44
57
|
"loading",
|
|
58
|
+
"loading-state",
|
|
59
|
+
"loading-indicator",
|
|
45
60
|
"placeholder",
|
|
46
|
-
"
|
|
61
|
+
"shimmer",
|
|
62
|
+
"shimmer-effect",
|
|
63
|
+
"pulse",
|
|
64
|
+
"animation",
|
|
65
|
+
"ui",
|
|
66
|
+
"component",
|
|
67
|
+
"typescript",
|
|
68
|
+
"zero-dom-scan",
|
|
69
|
+
"lightweight",
|
|
70
|
+
"performance",
|
|
71
|
+
"jsx-inference"
|
|
47
72
|
],
|
|
48
73
|
"peerDependencies": {
|
|
49
74
|
"react": ">=18"
|