easy to use library for skeleton loading.
- new components
- several animation mode
- global colour and size registry
- dark mode
- vue.js implementation
- react native implementation
Using npm:
$ npm i @shayan-mirzaie/skeleton-react
Using yarn:
$ yarn add @shayan-mirzaie/skeleton-react
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>
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 |
- 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>