Lightweight and minimalistic Skeleton component for ReactJs 🎉
npm install @aishwaryv/react-skeleton
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 {Skeleton} from '@aishwaryv/react-skeleton';
import React from 'react';
import Config from './SkeletonConfig';
function App() {
return <Skeleton config={Config} {...rest} />;
}
export default App;
Checkout demo code sandbox here - Sandbox
Property | Type | Defult | Description |
---|---|---|---|
id | String | Unique ID for every element | |
className | String | Optional class can be provided to each element | |
style | React.CSSProperties | Styles which will be applied to the 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 |