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

| Props | type | required | defaultValue | |----------------------|----------------------------------|----------|--------------| | children | ReactNode | true | | | value | Object (check appropriate table) | true | {} |

value prop consist of these:

| Props | type | required | defaultValue | |-------------------|------------------------------------------------|----------|-----------------------------------| | isDark | boolean | false | false | | colorTheme | Object (ColorThemes) (check appropriate table) | false | DEFAULT_COLOR_THEMES | | breakpoints | Object (Breakpoints) (check appropriate table) | false | DEFAULT_BREAKPOINTS | | skeletonAnimation | string | false | SKELETON_ANIMATION_VARIANTS.SLIDE |

colorTheme prop consist of these:

| Props | type | required | defaultValue | |-------|-----------------------------------------|----------|------------------------------------------| | dark | Object {main: string, gradient: string} | true | { main: '#282c34', gradient: '#2c303a' } | | light | Object {main: string, gradient: string} | true | { main: '#f1f1f1', gradient: '#ececec' } |

breakpoints prop consist of these:

| Props | type | required | defaultValue | |---------|--------|----------|--------------| | mobile | string | true | 576px | | tablet | string | true | 961px | | desktop | string | true | 962px > |

Props of Skeleton

| Props | type | required | defaultValue | |----------------------|--------------------------------------------------------------------------|----------|--------------| | styles | Object | false | {} | | customContainerWidth | number (breakpoints will work with that width instead of window's width) | false | | | grid | IGrid (object) | true | |

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 :)