Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avrcoelho/react-native-skeleton-loader-pulse
Skeleton Loader Pulse for React Native
https://github.com/avrcoelho/react-native-skeleton-loader-pulse
component loader react react-native skeleton
Last synced: 2 months ago
JSON representation
Skeleton Loader Pulse for React Native
- Host: GitHub
- URL: https://github.com/avrcoelho/react-native-skeleton-loader-pulse
- Owner: avrcoelho
- Created: 2020-04-28T15:52:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T15:07:09.000Z (almost 2 years ago)
- Last Synced: 2024-09-19T09:18:35.873Z (4 months ago)
- Topics: component, loader, react, react-native, skeleton
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-skeleton-loader-pulse
- Size: 2.51 MB
- Stars: 13
- Watchers: 1
- Forks: 1
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# React Native Skeleton Loader Pulse Component
Skeleton Loader Pulse for React Native
## Install
```shell
npm install react-native-skeleton-loader-pulse
```
ou
```shell
yarn add react-native-skeleton-loader-pulse
```
## Usage
### SkeletonItem
```js
import React from "react";
import { SkeletonItem } from "react-native-skeleton-loader-pulse";
export default function Component() {
return ;
}
```
### Props
| property | propType | required | default | description |
| ------------ | ----------------------------- | -------- | ------- | -------------------------- |
| color | string \| undefined | \- | \#ccc | Skeleton color |
| pulseTime | number \| undefined | \- | 1 | pulse time in seconds |
| width | string \| number \| undefined | \- | 100% | width container component |
| height | string \| number \| undefined | \- | 10px | height container component |
| marginTop | string \| number \| undefined | \- | 0 | margin top component |
| marginBottom | string \| number \| undefined | \- | 0 | margin bottom component |
| marginLeft | string \| number \| undefined | \- | 0 | margin left component |
| marginRight | string \| number \| undefined | \- | 0 | margin right component |
| borderRadius | number \| undefined | \- | 0 | border radius component |
### SkeletonLayout
```js
import React from "react";
import { SkeletonLayout } from "react-native-skeleton-loader-pulse";
export default function Component() {
return (
);
}
```
### Props
| property | propType | required | default | description |
| --------- | ------------------------------------------ | -------- | ------- | ------------------------- |
| color | string \| undefined | \- | \#ccc | Skeleton color |
| pulseTime | number \| undefined | \- | 1 | pulse time |
| width | string \| number \| undefined | \- | 100% | width container component |
| direction | "column" \| "row" \| undefined | \- | column | flex\-direction of layout |
| align | "center" \| "left" \| "right" \| undefined | \- | left | align items of layout |
| items | Item\[\] | yes | \- | Layout: Array of objects |
| | | | | |
### Props array Item
| property | propType | required | default | description |
| ------------ | ----------------------------- | -------- | ------- | ------------- |
| height | number \| string | yes | \- | height |
| width | number \| string \| undefined | \- | 100% | widtt |
| borderRadius | number \| undefined | \- | 0 | border radius |
| marginBottom | number \| string \| undefined | \- | 3px | margin bottom |
| marginTop | number \| string \| undefined | \- | 3px | margin top |
| marginLeft | number \| string \| undefined | \- | 0 | margin left |
| marginRight | number \| string \| undefined | \- | 0 | margin right |
## LICENSE
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
Development by: [André Coelho](https://andrecoelho.dev)