Skeleton Effect

Skeleton Effect is a lightweight and highly customizable React package designed to help developers implement skeleton loading effects effortlessly. Skeleton loaders are visual placeholders that simulate the layout of content while it's being loaded, improving the user experience by minimizing perceived load times.

Installation

npm install skeleton-effect

Overview

The core component of the package is the SkeletonEffect, which provides flexible and easy-to-use skeleton loading screens. With two key attributes count and outerWidth developers can fine-tune the skeleton's appearance to match their application's layout.

Key Features

SkeletonEffect Component: A flexible, reusable component that can be easily integrated into any part of your application. Customizable Attributes: count: Define the number of skeleton elements to display, allowing you to reflect the structure of real content. outwidth: Control the width of the skeleton elements to ensure they match your design and layout. Smooth Animations: Built-in animations for creating an engaging and fluid loading experience. Performance Efficient: Lightweight and optimized to ensure minimal impact on your application’s performance.

Attributes count: Specifies the number of skeleton elements.

Type: number Default: 1 outwidth: Defines the width of each skeleton element.

Type: string Default: "100%"

import React from 'react';
import { SkeletonEffect } from 'skeleton-effect';

const MyComponent = () => {
  return (
    <div>
      <SkeletonEffect count={5} outerWidth="80%" />
    </div>
  );
};

export default MyComponent;