Socket
Socket
Sign inDemoInstall

react-loading-skeleton

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-loading-skeleton - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

CHANGELOG.md
dist/index.d.ts
dist/index.js
dist/index.mjs
dist/skeleton.css
dist/Skeleton.d.ts
dist/SkeletonStyleProps.d.ts
dist/SkeletonTheme.d.ts
dist/SkeletonThemeContext.d.ts
LICENSE

119

package.json
{
"name": "react-loading-skeleton",
"version": "2.2.0",
"license": "MIT",
"author": "David Tang",
"private": false,
"main": "lib/index.js",
"types": "lib/index.d.ts",
"files": [
"lib/"
],
"sideEffects": false,
"browserslist": [
"maintained node versions",
"> 0.25%",
"not dead"
],
"version": "3.0.0",
"keywords": [

@@ -29,41 +15,82 @@ "react",

},
"license": "MIT",
"author": "David Tang",
"sideEffects": [
"**/*.css"
],
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"files": [
"dist/"
],
"scripts": {
"build": "yarn clean && tsc && rollup -c .config/rollup.config.js",
"clean": "rimraf dist",
"lint": "eslint",
"lint-all": "yarn lint .",
"lint-staged": "lint-staged --no-stash",
"prepack": "yarn run build",
"prettier-all": "prettier .",
"setup": "husky install",
"start": "yarn run storybook",
"test": "jest",
"build": "babel src --out-dir lib --delete-dir-on-start --ignore \"src/**/*.test.js\" && cp src/index.d.ts lib",
"storybook": "start-storybook -p 8080",
"prepublishOnly": "yarn run build"
"test": "jest --config .config/jest.config.cjs"
},
"jest": {
"roots": [
"<rootDir>/src/"
"lint-staged": {
"*.ts?(x)": [
"eslint --max-warnings 0 --fix",
"prettier --write"
],
"setupFiles": [
"<rootDir>/testSetup/testSetup.js"
]
"*.{md,js,cjs,yml,json}": "prettier --write"
},
"dependencies": {
"@emotion/core": "^10.0.22"
"browserslist": [
"maintained node versions",
"> 0.25%",
"not dead",
"not IE 11"
],
"devDependencies": {
"@babel/core": "^7.15.8",
"@rollup/plugin-typescript": "^8.2.5",
"@storybook/addon-essentials": "^6.3.10",
"@storybook/addon-links": "^6.3.10",
"@storybook/react": "^6.3.10",
"@swc/core": "^1.2.93",
"@swc/jest": "^0.2.4",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.2",
"@types/react": "^17.0.27",
"@types/react-dom": "^17.0.9",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"babel-loader": "^8.2.2",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^14.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jest": "^24.5.2",
"eslint-plugin-jest-dom": "^3.9.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^4.12.4",
"husky": "^7.0.0",
"jest": "^27.2.5",
"lint-staged": "^11.2.0",
"prettier": "^2.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rimraf": "^3.0.2",
"rollup": "^2.58.0",
"rollup-plugin-copy": "^3.4.0",
"tslib": "^2.3.1",
"typescript": "^4.4.3",
"webpack": "^5.58.1"
},
"peerDependencies": {
"react": "^15.6.1 || ^16.0.0 || ^17.0.0"
"react": ">=16.8.0"
},
"devDependencies": {
"@babel/cli": "^7.6.2",
"@babel/core": "^7.7.2",
"@babel/plugin-proposal-class-properties": "^7.7.0",
"@babel/preset-env": "^7.7.1",
"@babel/preset-react": "^7.7.0",
"@emotion/babel-preset-css-prop": "^10.0.17",
"@storybook/react": "^5.2.6",
"@types/react": "^16.9.11",
"babel-loader": "^8.0.6",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0",
"prop-types": "^15.5.10",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-test-renderer": "^16.12.0"
}
}
"packageManager": "yarn@3.0.2"
}

296

README.md

@@ -1,16 +0,33 @@

# react-loading-skeleton
<div align="center">
<a href="https://github.com/dvtng/react-loading-skeleton">
<img src="assets/logo.svg" alt="Logo" width="80" height="80" />
</a>
<h1 align="center">React Loading Skeleton</h1>
<p align="center">
Make beautiful, animated loading skeletons that automatically adapt to your app.
</p>
<h3>
<!--<a href="https://dvtng.github.io/react-loading-skeleton">View Live Demo</a> &nbsp;&nbsp;&bull;&nbsp;&nbsp;-->
<a href="https://codesandbox.io/s/react-loading-skeleton-3xwil?file=/src/App.tsx">Open on CodeSandbox</a>
</h3>
<img src="https://media.giphy.com/media/l0Iyk4bAAjac3AU2k/giphy.gif" alt="Gif of the skeleton in action">
</div>
Make beautiful, animated loading skeletons that automatically adapt to your app.
Learn about the [changes in version 3](https://github.com/dvtng/react-loading-skeleton/releases/tag/v3.0.0), or view the [v2 documentation](https://github.com/dvtng/react-loading-skeleton/tree/v2#readme).
![Gif of skeleton in action](https://media.giphy.com/media/l0Iyk4bAAjac3AU2k/giphy.gif)
## Basic Usage
## Basic usage
Install via one of:
Install by `npm`/`yarn` with `react-loading-skeleton`.
```bash
yarn add react-loading-skeleton
npm install react-loading-skeleton
```
```javascript
import Skeleton from 'react-loading-skeleton';
```tsx
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
<Skeleton/> // Simple, single-line loading skeleton
<Skeleton count={5}/> // Five-line loading skeleton
<Skeleton /> // Simple, single-line loading skeleton
<Skeleton count={5} /> // Five-line loading skeleton
```

@@ -22,25 +39,23 @@

The `<Skeleton>` 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 `<Skeleton>` component to have it automatically fill the correct dimensions.
The `Skeleton` component should be used directly in your components in place of
content that is loading. While other libraries require you to meticulously craft
a skeleton screen that matches the font size, line height, and margins of your
content, the `Skeleton` component is automatically sized to the correct
dimensions.
For example:
```javascript
class Blogpost extends Component {
render() {
```tsx
function BlogPost(props) {
return (
<div style={{ fontSize: 20, lineHeight: 2 }}>
<h1>{this.props.title || <Skeleton />}</h1>
{this.props.body || <Skeleton count={10} />}
</div>
);
}
<div>
<h1>{props.title || <Skeleton />}</h1>
{props.body || <Skeleton count={10} />}
</div>
)
}
```
...will produce the correctly-sized skeletons for the heading and body sections
without any further configuration of the `<Skeleton>` component.
...will produce correctly-sized skeletons for the heading and body without any
further configuration.

@@ -54,72 +69,215 @@ This ensures the loading state remains up-to-date with any changes

In addition to keeping the styling in-sync, here are some other reasons to do this:
This approach is beneficial because:
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.
1. It keeps styles in sync.
2. Components should represent all possible states — loading included.
3. It allows for more flexible loading patterns. In the blog post example above,
it's possible to have the title load before the body, while having both
pieces of content show loading skeletons at the right time.
## Theming
Using a `<SkeletonTheme>` component, you can easily change the colors of all
skeleton components below it in the React hierarchy:
Customize individual skeletons with props, or render a `SkeletonTheme` to style all skeletons below it in the React hierarchy:
```javascript
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
```tsx
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
<SkeletonTheme color="#202020" highlightColor="#444">
<p>
<Skeleton count={3} />
</p>
</SkeletonTheme>;
return (
<SkeletonTheme baseColor="#202020" highlightColor="#444">
<p>
<Skeleton count={3} />
</p>
</SkeletonTheme>
)
```
## Duration
## Props Reference
```javascript
<Skeleton duration={2} />
```
### `Skeleton` only
`duration`: Number, defaults to 1.2
<table>
<thead>
<tr>
<th>Prop</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>count?: number</code></td>
<td>The number of lines of skeletons to render.</td>
<td><code>1</code></td>
</tr>
<tr>
<td><code>wrapper?: React.FunctionComponent</code></td>
<td>
A custom wrapper component that goes around the individual skeleton
elements.
</td>
<td></td>
</tr>
<tr>
<td><code>circle?: boolean</code></td>
<td>
Makes the skeleton circular by setting <code>border-radius</code> to
<code>50%</code>.
</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>className?: string</code></td>
<td>
A custom class name for the individual skeleton elements which is used
alongside the default class, <code>react-loading-skeleton</code>.
</td>
<td></td>
</tr>
<tr>
<td><code>containerClassName?: string</code></td>
<td>
A custom class name for the <code>&lt;span&gt;</code> that wraps the
individual skeleton elements.
</td>
<td></td>
</tr>
<tr>
<td><code>containerTestId?: string</code></td>
<td>
A string that is added to the container element as a
<code>data-testid</code> attribute. Use it with
<code>screen.getByTestId('...')</code> from React Testing Library.
</td>
<td></td>
</tr>
<tr>
<td><code>style?: React.CSSProperties</code></td>
<td>
This is an escape hatch for advanced use cases and is not the preferred
way to style the skeleton. Props (e.g. <code>width</code>,
<code>borderRadius</code>) take priority over this style object.
</td>
<td></td>
</tr>
</tbody>
</table>
Duration is how long it takes do one cycle of the skeleton animation.
### `Skeleton` and `SkeletonTheme`
## Delay
<table>
<thead>
<tr>
<th>Prop</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>baseColor?: string</code></td>
<td>The background color of the skeleton.</td>
<td><code>#ebebeb</code></td>
</tr>
<tr>
<td><code>highlightColor?: string</code></td>
<td>The highlight color in the skeleton animation.</td>
<td><code>#f5f5f5</code></td>
</tr>
<tr>
<td><code>width?: string | number</code></td>
<td>The width of the skeleton.</td>
<td><code>100%</code></td>
</tr>
<tr>
<td><code>height?: string | number</code></td>
<td>The height of each skeleton line.</td>
<td>The font size</td>
</tr>
<tr>
<td><code>borderRadius?: string | number</code></td>
<td>The border radius of the skeleton.</td>
<td><code>0.25rem</code></td>
</tr>
<tr>
<td><code>inline?: boolean</code></td>
<td>
By default, a <code>&lt;br /&gt;</code> is inserted after each skeleton so
that each skeleton gets its own line. When <code>inline</code> is true, no
line breaks are inserted.
</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>duration?: number</code></td>
<td>The length of the animation in seconds.</td>
<td><code>1.5</code></td>
</tr>
<tr>
<td><code>direction?: 'ltr' | 'rtl'</code></td>
<td>
The direction of the animation, either left-to-right or right-to-left.
</td>
<td><code>'ltr'</code></td>
</tr>
<tr>
<td><code>enableAnimation?: boolean</code></td>
<td>
Whether the animation should play. The skeleton will be a solid color when
this is <code>false</code>. You could use this prop to stop the animation
if an error occurs.
</td>
<td><code>true</code></td>
</tr>
</tbody>
</table>
```javascript
<Skeleton delay={1} />
```
## Examples
`duration`: Number, defaults to 0
### Custom Wrapper
Waits `delay` seconds before looping the animation.
Wrapping a skeleton in a container is simple:
## Width
```tsx
function Box({ children }: PropsWithChildren<unknown>) {
return (
<div
style={{
border: '1px solid #ccc',
display: 'block',
lineHeight: 2,
padding: '1rem',
marginBottom: '0.5rem',
width: 100,
}}
>
{children}
</div>
)
}
`width`: Number | String | null, defaults to null
```javascript
<Skeleton width={100} />
const wrapped = (
<Box>
<Skeleton />
</Box>
)
```
Width of the skeleton. Useful when the skeleton is inside an inline element with
no width of its own.
### The height of my container is off by a few pixels!
## Height
In the example below, the height of the `<div>` will be slightly larger than 30 even though the `react-loading-skeleton` element is exactly 30px.
`Height`: Number | String | null, defaults to null
```javascript
<Skeleton height={100} />
```tsx
<div>
<Skeleton height={30} />
</div>
```
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).
This is a consequence of how `line-height` works in CSS. If you need the `<div>` to be exactly 30px tall, set its `line-height` to 1. [See here](https://github.com/dvtng/react-loading-skeleton/issues/23#issuecomment-939231878) for more details.
## Circle
## Contributing
`Circle`: Boolean | false, defaults to false
Contributions are welcome! See `CONTRIBUTING.md` to get started.
```javascript
<Skeleton circle={true} height={50} width={50} />
```
## Acknowledgements
Prop for making the skeleton look like a circle, for when you are creating a user card with a profile picture for instance.
Our logo is based off an image from [Font Awesome](https://fontawesome.com/license/free). Thanks!
lib/index.d.ts
lib/index.js
lib/skeleton-theme.js
lib/skeleton.js
LICENSE.md
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc