React Skeleton Builder

A lightweight React component library for building skeletons with TypeScript and Chakra UI.

Installation

npm i react-skeleton-builder

Usage

In the root of your providers

import { ReactSkeletonProvider } from 'react-skeleton-builder';

<ReactSkeletonProvider
    value={{
        // Initialy we can put empty object.
        // Check the props to customize the builder's behaviour
    }} 
>
    {children}
</ReactSkeletonProvider>

Example of Skeleton Component

You can generate the grid structure by visiting the website.

import React from 'react';
import { Skeleton } from 'react-skeleton-builder';

const ExampleComponent: React.FC = () => {
return (
<Skeleton
    styles={{
        width: '100%',
        height: '60px',
    }}
    grid={{
        children: [
            {
                w: '60px',
                skeletons: [
                    {
                        h: '60px',
                        r: '50%',
                    },
                ],
            },
            {
                direction: 'column',
                gridGap: '.5',
                skeletons: [
                    { r: '.4rem', w: '80%' },
                    { r: '.4rem', w: '60%' },
                    { r: '.4rem', w: '30%' },
                ],
            },
        ],
    }}
    />
);
};

export default ExampleComponent;

The result is this:

API

Props of ReactSkeletonProvider

value prop consist of these:

colorTheme prop consist of these:

breakpoints prop consist of these:

If you encounter any issues, please visit this link.

If my builder was helpful for you, you can show your support by

You can reach out to me via:

• Telegram
• Linkedin

And thanks for using my builder :)