React-skeleton-builder NPM

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' }