@ehsaneha/react-skeleton

A customizable React skeleton loader component with pulse animation and full native div props support.

Features

• Pulse animation for loading placeholders
• Supports rendering multiple skeleton blocks (count prop)
• Fully customizable width, height, and styles
• Accepts all native div element props (e.g., id, onClick, className)
• Supports forwarding refs to the first skeleton element

Installation

npm install @ehsaneha/react-skeleton

or

yarn add @ehsaneha/react-skeleton

Usage

import React, { useRef } from "react";
import Skeleton from "@ehsaneha/react-skeleton";

function App() {
  const ref = useRef<HTMLDivElement>(null);

  return (
    <div>
      <Skeleton
        ref={ref}
        count={3}
        width="150px"
        height="20px"
        className="my-skeleton"
        onClick={() => console.log("Skeleton clicked")}
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ------------------------------------------ | --------------------- | -------- | ---------------------------------------- | | count | number | 1 | Number of skeleton blocks to render | | width | string | "100%" | Width of each skeleton block | | height | string | "1rem" | Height of each skeleton block | | className | string | "" | Additional CSS class names | | style | React.CSSProperties | {} | Inline styles for each skeleton block | | ...native div props (e.g. id, onClick) | | | All other native div props are supported |

Development

Clone the repo, then:

npm install
npm run build

License

This package is licensed under the MIT License. See LICENSE for more information.

Feel free to modify or contribute to this package!