react-auto-skeleton-z
v1.1.1TypeScript
Automatic skeleton UI generation for React components
0/weekUpdated 1 months agoMITUnpacked: 22.6 KB
Published by Delpi.Kye
npm install react-auto-skeleton-zš¦“ react-auto-skeleton-z
!Downloads
---
Automatic skeleton UI generation for React components.
Plugin-first, component-driven, layout-aware skeletons ā no wrapper required.
---
$3
- Auto-generate skeletons from real components
- Component-driven (Component.skeleton) or plugin-driven
- Layout-aware ā zero layout shift
- Async / lazy component support
- Works with any UI library (Antd / MUI / custom)
- Hook API: useAutoSkeleton
---
$3
``bash`
npm install react-auto-skeleton-zor
yarn add react-auto-skeleton-z
- Import global CSS for animation:
`ts`
import "react-auto-skeleton-z/styles.css"
---
$3
#### 1ļøā£ Basic usage (component .skeleton property)
`tsx
import React from "react"
import ReactDOM from "react-dom"
import { AutoSkeleton, SkeletonCircle, SkeletonText, SkeletonRect } from "react-auto-skeleton-z"
import "react-auto-skeleton-z/styles.css"
// Real component
function UserCard({ user }) {
return (
{user.name}
{user.email}
)
}
// Define skeleton directly on component
UserCard.skeleton = () => (
)
const fakeUser = { avatar: "https://i.pravatar.cc/64", name: "John Doe", email: "john@example.com" }
function App({ loading }) {
return (
)
}
ReactDOM.render(
`
ā
Skeleton appears automatically when loading=true loading=false
ā
Real UI renders when
`ts
// Profile.tsx => Next example
import React from "react"
import { SkeletonCircle, SkeletonText } from "react-auto-skeleton-z"
export default function Profile({ user }) {
return (
{user.name}
)
}
// Add skeleton for AutoSkeleton
Profile.skeleton = () => (
)
// lazy profile
const LazyProfile = lazy(() => import("./Profile"))
`
---
#### 2ļøā£ Plugin system
`ts
import { createSkeletonPlugin, AutoSkeleton } from "react-auto-skeleton-z"
const ProfilePlugin = createSkeletonPlugin({
name: "profile",
rules: [
{
match: (el) => el.type?.name === "Profile",
skeleton: "circle"
}
],
})
`
- Plugin allows automatic detection without defining
for every component. ---
#### 3ļøā£ useAutoSkeleton hook
`ts
import React, { lazy, Suspense } from "react"
import { useAutoSkeleton } from "react-auto-skeleton-z"const LazyProfile = lazy(() => import("./Profile"))
function Page({ loading }) {
const content = useAutoSkeleton(
Loading...
,
{ loading }
)
return <>{content}
}
export default Page
`
- Returns a tree with skeletons automatically injected.
---
#### 4ļøā£ Async / Lazy components
`ts
import React, { lazy, Suspense } from "react"
import { AutoSkeleton } from "react-auto-skeleton-z"
const LazyProfile = lazy(() => import("./Profile"))
`
- Lazy components automatically show skeleton until loaded.
---
#### 5ļøā£ Custom rules (layout-aware)
ts
rules={[
{
match: (el) => el.props?.style?.borderRadius === "50%",
skeleton: "circle",
},
{
match: (el) => el.type === "button",
skeleton: "rect",
},
]}
>
``- Rules let you match elements dynamically based on props, type, or other heuristics.
---
$3
- Zero manual wiring
- Layout-aware ā no layout shift
- Component-driven ā easy maintenance
- Plugin-friendly ā reusable rules
- Perfect for dashboards, lists, cards, or heavy-loading UIs
---
$3
MIT