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