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 = [
  {
    id: 'header',
    style: {
      width: 'max-content',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: '15px',
    },
    content: [
      {
        id: 'title',
        style: {
          height: '30px',
          width: '400px',
          background: '#dcdcdc',
          borderRadius: '6px',
        },
      },
      {
        id: 'description',
        style: {
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '15px',
        },
        content: [
          {
            id: 'desc1',
            style: {
              height: '40px',
              width: '250px',
              background: '#dcdcdc',
              borderRadius: '6px',
            },
          },
          {
            id: 'desc2',
            style: {
              height: '40px',
              width: '200px',
              background: '#dcdcdc',
              borderRadius: '6px',
            },
          },
        ],
      },
    ],
  },
  {
    id: '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 React from 'react';
import {Skeleton} from '@aishwaryv/react-skeleton';

import Config from "./SkeletonConfig"

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

export default App;

Demo

Checkout demo codesandbox here - Sandbox

Properties for the Config object

| Property | Type | Defult | Description | | --------- | ------------------- | ------ | ---------------------------------------------------------------------------------- | | id | String | | Unique ID for every element | | className | String | | Optional class can be prvided to each element | | style | React.CSSProperties | | Style object which will be applied to the parent container | | duration | Number | 1.5 | Duration of the animation in seconds | | content | SkeletonConfig | | Optional content can be passed to each element which will create the skeleton-tree |