@aishwaryv/react-skeleton v2.0.1

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