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>