1.1.3 • Published 1 year ago
@shayan-mirzaie/skeleton-react v1.1.3
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-reactUsing yarn:
$ yarn add @shayan-mirzaie/skeleton-reactUsage
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>