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 {SkeletonTree} from '@aishwaryv/react-skeleton';

export const Config: SkeletonTree = [
  {
    name: 'container',
    // 💡 You can also use className instead of passing styles directly
    style: {
      height: 'max-content',
      width: '25rem',
      display: 'flex',
      flexDirection: 'column',
      gap: '2rem',
    },
    nodes: [
      {
        name: 'header',
        nodes: [
          {
            name: 'title',
            style: {
              height: '2rem',
              width: '10rem',
              borderRadius: '0.5rem',
            },
          },
          {
            name: 'subtitle',
            style: {
              height: '1rem',
              width: '50%',
              borderRadius: '0.25rem',
              marginTop: '0.5rem',
            },
          },
        ],
      },
      {
        name: 'form',
        style: {
          display: 'flex',
          flexDirection: 'column',
          gap: '1rem',
        },
        nodes: [
          {
            name: 'input-box-1',
            style: {
              height: '4rem',
              width: '100%',
              borderRadius: '0.5rem',
            },
          },
          {
            name: 'input-box-2',
            style: {
              height: '4rem',
              width: '100%',
              borderRadius: '0.5rem',
            },
          },
          {
            name: 'button',
            style: {
              height: '2rem',
              width: '100%',
              borderRadius: '0.5rem',
              marginTop: '1rem',
            },
          },
        ],
      },
    ],
  },
];

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

import React from 'react';

import {Skeleton} from '../../Skeleton';
import {Config} from './SkeletonConfig';

function App() {
  return <Skeleton tree={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
duration	Number	Yes	1.8	Duration of the animation in seconds
nodes	SkeletonTree	Yes		Nested content, which creates additional skeleton elements within the node