# @shayan-mirzaie/skeleton-react

> easy to use library for skeleton loading.

Latest version **1.1.3** (published 2023-02-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install @shayan-mirzaie/skeleton-react
pnpm add @shayan-mirzaie/skeleton-react
yarn add @shayan-mirzaie/skeleton-react
bun add @shayan-mirzaie/skeleton-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-02-12 |
| First published | 2023-02-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 146.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Shayan Mirzaie |
| Maintainers | shayan-mirzaie |
| Keywords | react, skeleton, js, loading |

## Links

- npm: https://www.npmjs.com/package/@shayan-mirzaie/skeleton-react
- Repository: https://github.com/shayan1998/skeleton-react
- Issues: https://github.com/shayan1998/skeleton-react/issues
- npm.io page: https://npm.io/package/@shayan-mirzaie/skeleton-react

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.6

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.1.3 (latest) — 2023-02-12
- 1.1.2 — 2023-02-11
- 1.1.1 — 2023-02-10
- 1.1.0 — 2023-02-09
- 1.0.0 — 2023-02-09

## README

# Skeleton React

easy to use library for skeleton loading.

<table>
    <tr>
        <td>
            <img src="https://user-images.githubusercontent.com/43598980/218112412-ad0f7791-af2c-4a51-8c2b-e06ad3856554.gif"/>
        </td>
        <td>
            <img src="https://user-images.githubusercontent.com/43598980/218112529-eae68d59-d3f3-40d9-94a9-56ed0bbf0cfa.gif"/>
        </td>
        <td>
            <img src="https://user-images.githubusercontent.com/43598980/218112477-91930798-ee5e-42f3-ad48-556eba3062ab.gif"/>
        </td>
    </tr>
</table>

<Br/>
<Br/>

## 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` <br/> dir `rtl\|ltr`                                                                                                              | YES      |
| Skeleton.Rect   | show rectangle shape                 | height `string ex: 20px` <br/> width `string ex: 20px` <br/> margin `string ex: 20px` <br/> full `boolean` <br/> onClick `callback function`       |
| Skeleton.Square | show square shape                    | width `string ex: 20px` <br/> margin `string ex: 20px` <br/> onClick `callback function`                                                           |
| Skeleton.Circle | show circle shape                    | radius `string ex: 20px` <br/> margin `string ex: 20px` <br/> onClick `callback function`                                                          |
| Skeleton.Row    | show children item in a row          | alignItems `center\|start\|end\|baseline` <br/> justifyContent `center\|start\|end\|space-around\|space-between` <br/> onClick `callback function` | YES      |
| Skeleton.Col    | show children item in a column       | alignItems `center\|start\|end\|baseline` <br/> justifyContent `center\|start\|end\|space-around\|space-between` <br/> 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
 <img src="https://user-images.githubusercontent.com/43598980/218112477-91930798-ee5e-42f3-ad48-556eba3062ab.gif"/>
 
```
<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
<img src="https://user-images.githubusercontent.com/43598980/218112412-ad0f7791-af2c-4a51-8c2b-e06ad3856554.gif"/>

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

---
_Source: https://npm.io/package/@shayan-mirzaie/skeleton-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._