@shayan-mirzaie/skeleton-react

Skeleton React

easy to use library for skeleton loading.

coming soon

• new components
• several animation mode
• global colour and size registry
• dark mode
• vue.js implementation
• react native implementation

installation

Using npm:

$ npm i @shayan-mirzaie/skeleton-react

Using yarn:

$ yarn add @shayan-mirzaie/skeleton-react

Usage

simply import the package

import Skeleton from "@shayan-mirzaie/skeleton-react";

then use <Skeleton> component to see the result :

<Skeleton>
    <Skeleton.Circle />
    <Skeleton.Rect />
    <Skeleton.Rect width="75%" />
</Skeleton>

Api

name	description	props	children
Skeleton	wrapper component of library	enable boolean dir rtl|ltr	YES
Skeleton.Rect	show rectangle shape	height string ex: 20px width string ex: 20px margin string ex: 20px full boolean onClick callback function
Skeleton.Square	show square shape	width string ex: 20px margin string ex: 20px onClick callback function
Skeleton.Circle	show circle shape	radius string ex: 20px margin string ex: 20px onClick callback function
Skeleton.Row	show children item in a row	alignItems center|start|end|baseline justifyContent center|start|end|space-around|space-between onClick callback function	YES
Skeleton.Col	show children item in a column	alignItems center|start|end|baseline justifyContent center|start|end|space-around|space-between onClick callback function	YES
Skeleton.Center	show children item center	onClick callback function	YES
Skeleton.List	iterate children item to show a list	count number	YES

Examples

• post view

<Skeleton>
    <Skeleton.Row alignItems="center" justifyContent="space-between">
        <Skeleton.Circle radius="40px" />
        <Skeleton.Rect width="70px" height="20px" />
    </Skeleton.Row>
    <Skeleton.Rect height="220px" />
</Skeleton>

• list view

<Skeleton>
    <Skeleton.List count={4}>
        <Skeleton.Row>
            <Skeleton.Circle />
            <Skeleton.Col>
                <Skeleton.Rect />
                <Skeleton.Rect width="50%" />
            </Skeleton.Col>
        </Skeleton.Row>
    </Skeleton.List>
</Skeleton>