@mohsensami/react-loading-skeleton

react-loading-skeleton

A lightweight and customizable React component for creating loading skeleton screens. This package provides an easy way to implement loading states in your React applications with smooth animations and various shape options.

Installation

npm install @mohsensami/react-loading-skeleton
# or
yarn add @mohsensami/react-loading-skeleton

Features

• Multiple shape variants (text, circle, rectangle)
• Customizable dimensions
• Smooth animation
• TypeScript support
• Lightweight and performant
• Easy to integrate

Usage

import { Skeleton } from "@mohsensami/react-loading-skeleton";

function MyComponent() {
  return (
    <div>
      {/* Text skeleton */}
      <Skeleton width={200} height={20} variant="text" />

      {/* Circle skeleton */}
      <Skeleton width={40} height={40} variant="circle" />

      {/* Rectangle skeleton */}
      <Skeleton width={300} height={100} variant="rect" />
    </div>
  );
}

API Reference

Skeleton Component

The Skeleton component accepts the following props:

Prop	Type	Default	Description
width	number | string	'100%'	Width of the skeleton element. Can be a number (in pixels) or a string (e.g., '100%')
height	number | string	'100%'	Height of the skeleton element. Can be a number (in pixels) or a string (e.g., '100%')
variant	'text' | 'circle' | 'rect'	'text'	Shape variant of the skeleton
style	CSSProperties	{}	Additional CSS styles to apply to the skeleton
className	string	undefined	Additional CSS class name to apply to the skeleton

Examples

Basic Text Skeleton

<Skeleton width={200} height={20} variant="text" />

Profile Picture Skeleton

<Skeleton width={40} height={40} variant="circle" />

Card Skeleton

<Skeleton width={300} height={100} variant="rect" />

Complex Layout

<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
  <Skeleton width={40} height={40} variant="circle" />
  <div style={{ flex: 1 }}>
    <Skeleton
      width="100%"
      height={20}
      variant="text"
      style={{ marginBottom: "8px" }}
    />
    <Skeleton width="60%" height={16} variant="text" />
  </div>
</div>

License

MIT © Mohsen Sami