Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/akhil-neoito/react-loading-skeleton
Create skeleton screens that automatically adapt to your app!
https://github.com/akhil-neoito/react-loading-skeleton
Last synced: 3 months ago
JSON representation
Create skeleton screens that automatically adapt to your app!
- Host: GitHub
- URL: https://github.com/akhil-neoito/react-loading-skeleton
- Owner: akhil-neoito
- License: mit
- Fork: true (dvtng/react-loading-skeleton)
- Created: 2021-06-03T18:30:45.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-05-22T04:32:14.000Z (over 3 years ago)
- Last Synced: 2023-07-18T11:58:56.160Z (over 1 year ago)
- Size: 1.49 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-loading-skeleton
Make beautiful, animated loading skeletons that automatically adapt to your app.
## Basic usage
Install by `npm`/`yarn` with `react-loading-skeleton`.
```javascript
import Skeleton from 'react-loading-skeleton';
// Simple, single-line loading skeleton
// Five-line loading skeleton
```
## Principles
### Adapts to the styles you have defined
The `` component is designed to be used directly in your components,
in place of content while it's still loading.
Unlike other libraries, rather than meticulously crafting a skeleton screen to
match the `font-size`, `line-height` or `margin`s your content takes on,
use a `` component to have it automatically fill the correct dimensions.
For example:
```javascript
class Blogpost extends Component {
render() {
return (
{this.props.title || }
{this.props.body || }
);
}
}
```
...will produce the correctly-sized skeletons for the heading and body sections
without any further configuration of the `` component.
This ensures the loading state remains up-to-date with any changes
to your layout or typography.
### Don't make dedicated skeleton screens
Instead, make components with _built-in_ skeleton states.
In addition to keeping the styling in-sync, here are some other reasons to do this:
1. Components represent all possible states it can be in - loading included.
1. It allows for more flexible loading patterns - in the `Blogpost` example, it's possible to have the `title` load first, and then the `body`, while having both pieces of content show loading skeletons at the right time.
## Theming
Using a `` component, you can easily change the colors of all
skeleton components below it in the React hierarchy:
```javascript
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
;
```
## Count
`count`: Number, defaults to 1
```javascript
```
Number of loading skeleton lines.
## Duration
```javascript
```
`duration`: Number, defaults to 1.2
Duration is how long it takes do one cycle of the skeleton animation.
## Width
`width`: Number | String | null, defaults to null
```javascript
```
Width of the skeleton. Useful when the skeleton is inside an inline element with
no width of its own.
## Height
`height`: Number | String | null, defaults to null
```javascript
```
Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance
a card. Also needed for the prop `circle` (see below).
## Wrapper
`wrapper`: ReactNode | null, defaults to null
```javascript
const Box = ({ children }) => (
{children}
);
```
Prop for wrap the skeleton in a custom component.
## Circle
`circle`: Boolean, defaults to false
```javascript
```
Prop for making the skeleton look like a circle, for when you are creating a user card with a profile picture for instance.
## Style
`style`: CSSProperties, defaults to {}
```javascript
```
Prop for adding custom CSS styles to the skeleton.
## ClassName
`className`: String, defaults to ""
```javascript
```
Prop for adding custom CSS classname to the skeleton.