React-Skeleton

Lightweight and minimalistic Skeleton component for ReactJs 🎉

Install

npm install @aishwaryv/react-skeleton

Usage

Create a config array for the skeleton, omit the type if you are using Javscript -

import type {SkeletonConfig} from '@aishwaryv/react-skeleton';

export const Config: SkeletonConfig = [
  {
    name: 'header',
    style: {
      width: 'max-content',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: '15px',
    },
    content: [
      {
        name: 'title',
        style: {
          height: '30px',
          width: '400px',
          background: '#dcdcdc',
          borderRadius: '6px',
        },
      },
      {
        name: 'description',
        style: {
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '15px',
        },
        content: [
          {
            style: {
              height: '40px',
              width: '250px',
              background: '#dcdcdc',
              borderRadius: '6px',
            },
          },
          {
            style: {
              height: '40px',
              width: '200px',
              background: '#dcdcdc',
              borderRadius: '6px',
            },
          },
        ],
      },
    ],
  },
  {
    name: 'mainDescription',
    style: {
      height: '75px',
      width: '430px',
      background: '#dcdcdc',
      borderRadius: '6px',
    },
  },
];

You can then use Skeleton like any other React component, passing the config and other attributes as needed

import {Skeleton} from '@aishwaryv/react-skeleton';
import React from 'react';

import Config from './SkeletonConfig';

function App() {
  return <Skeleton config={Config} {...rest} />;
}

export default App;

Demo

Checkout demo code sandbox here - Sandbox

Properties for the Config object

Property	Type	Optional	Default	Description
name	String	Yes		Unique name for each element
className	String	Yes		Optional class name for custom styling
style	React.CSSProperties	No		Inline styles to be applied to the container
duration	Number	Yes	1.5	Duration of the animation in seconds
content	SkeletonConfig	Yes		Nested content, which creates additional skeleton elements within the component