🦴 react-skeletonfy

Auto-generate skeleton loading UIs for any React component using a simple HOC.
Great for improving UX while data is being fetched — no design or boilerplate needed.

🚀 Features

• ✅ Plug-and-play usage with any React component
• ⚙️ Automatically renders loading skeletons based on layout
• 🎨 Minimal styling with built-in animations (customizable)
• 🧠 Built using introspection and simple heuristics
• 📦 Lightweight, tree-shakable, and TypeScript ready

📦 Installation

npm install react-skeletonfy
# or
yarn add react-skeletonfy

🔧 Usage

import { withSkeleton } from 'react-skeletonfy';

const ProfileCard = () => (
  <div>
    <h2>Jane Doe</h2>
    <p>Frontend Developer at Awesome Co.</p>
  </div>
);

const SkeletonProfile = withSkeleton(ProfileCard);

function App() {
  const loading = true;

  return (
    <div>
      <SkeletonProfile skeleton={loading} />
    </div>
  );
}

When skeleton={true}, a skeleton layout is rendered instead of your component.

🧪 Playground

To test locally:

npm install
npm run dev

Opens playground/index.html where you can toggle skeleton loading in a demo.

🛠 Props

| Prop | Type | Description | |------------|---------|----------------------------------------| | skeleton | boolean | If true, renders skeleton placeholders |

✨ Customization

You can extend styles by modifying the withSkeleton logic or customizing the fallback <SkeletonBox> component.

🧰 Development Scripts

• npm run dev – Launch playground dev server
• npm run build – Build library to dist/
• npm run test – Run unit tests with Vitest

📄 License

MIT © xyfer17

💡 Ideas to Extend

• Add support for field-level skeletons
• Allow passing custom skeleton layout
• Export <SkeletonBox> for standalone use
• Add themes (rounded, lines, circles, etc.)

🤝 Contributions Welcome!

Found a bug or want to improve the library? PRs are welcome!
Please read the CONTRIBUTING.md before submitting changes.

Let me know if you want:

• A markdown badge for GitHub stars/downloads
• A deployed demo on Vercel or Netlify
• A GIF or screenshot of the skeleton in action

I can add all that too!