Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
react-loading-skeleton
Advanced tools
The react-loading-skeleton package is a React component that allows developers to easily create skeleton loading screens. These skeleton screens are used to indicate that content is loading, providing a better user experience by showing placeholders instead of empty spaces.
Basic Skeleton
This feature allows you to create a basic skeleton placeholder. It is useful for indicating that a simple piece of content, such as text or an image, is loading.
<Skeleton />
Skeleton with Custom Width and Height
This feature allows you to customize the width and height of the skeleton placeholder. It is useful for creating placeholders that match the dimensions of the content being loaded.
<Skeleton width={200} height={100} />
Skeleton with Count
This feature allows you to create multiple skeleton placeholders in a row. It is useful for indicating that a list of items is loading.
<Skeleton count={5} />
Circle Skeleton
This feature allows you to create a circular skeleton placeholder. It is useful for indicating that a circular piece of content, such as a profile picture, is loading.
<Skeleton circle={true} height={50} width={50} />
Skeleton with Custom Colors
This feature allows you to customize the base and highlight colors of the skeleton placeholder. It is useful for matching the skeleton to the color scheme of your application.
<Skeleton baseColor="#202020" highlightColor="#444" />
react-content-loader is a package that allows you to create SVG-based loading placeholders. It offers more customization options compared to react-loading-skeleton, including the ability to create complex shapes and animations. However, it may require more effort to set up and customize.
react-placeholder is another package for creating loading placeholders. It provides a variety of built-in placeholder types, such as text, media, and custom shapes. It is similar to react-loading-skeleton in terms of ease of use but offers more predefined placeholder types.
react-spinners is a package that provides a collection of loading spinner components. While it does not offer skeleton loading screens, it is useful for indicating loading states with animated spinners. It can be used in conjunction with react-loading-skeleton for a more comprehensive loading experience.
Make beautiful, animated loading skeletons that automatically adapt to your app.
Learn about the changes in version 3, or view the v2 documentation.
Install via one of:
yarn add react-loading-skeleton
npm install react-loading-skeleton
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
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:
function BlogPost(props) {
return (
<div>
<h1>{props.title || <Skeleton />}</h1>
{props.body || <Skeleton count={10} />}
</div>
)
}
...will produce correctly-sized skeletons for the heading and body without any further configuration.
This ensures the loading state remains up-to-date with any changes to your layout or typography.
Instead, make components with built-in skeleton states.
This approach is beneficial because:
Customize individual skeletons with props, or render a SkeletonTheme
to style all skeletons below it in the React hierarchy:
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
return (
<SkeletonTheme baseColor="#202020" highlightColor="#444">
<p>
<Skeleton count={3} />
</p>
</SkeletonTheme>
)
Skeleton
onlyProp | Description | Default |
---|---|---|
count?: number | The number of lines of skeletons to render. | 1 |
wrapper?: React.FunctionComponent | A custom wrapper component that goes around the individual skeleton elements. | |
circle?: boolean |
Makes the skeleton circular by setting border-radius to
50% .
| false |
className?: string |
A custom class name for the individual skeleton elements which is used
alongside the default class, react-loading-skeleton .
| |
containerClassName?: string |
A custom class name for the <span> that wraps the
individual skeleton elements.
| |
containerTestId?: string |
A string that is added to the container element as a
data-testid attribute. Use it with
screen.getByTestId('...') from React Testing Library.
| |
style?: React.CSSProperties |
This is an escape hatch for advanced use cases and is not the preferred
way to style the skeleton. Props (e.g. width ,
borderRadius ) take priority over this style object.
|
Skeleton
and SkeletonTheme
Prop | Description | Default |
---|---|---|
baseColor?: string | The background color of the skeleton. | #ebebeb |
highlightColor?: string | The highlight color in the skeleton animation. | #f5f5f5 |
width?: string | number | The width of the skeleton. | 100% |
height?: string | number | The height of each skeleton line. | The font size |
borderRadius?: string | number | The border radius of the skeleton. | 0.25rem |
inline?: boolean |
By default, a <br /> is inserted after each skeleton so
that each skeleton gets its own line. When inline is true, no
line breaks are inserted.
| false |
duration?: number | The length of the animation in seconds. | 1.5 |
direction?: 'ltr' | 'rtl' | The direction of the animation, either left-to-right or right-to-left. | 'ltr' |
enableAnimation?: boolean |
Whether the animation should play. The skeleton will be a solid color when
this is false . You could use this prop to stop the animation
if an error occurs.
| true |
Wrapping a skeleton in a container is simple:
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>
)
}
const wrapped = (
<Box>
<Skeleton />
</Box>
)
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.
<div>
<Skeleton height={30} />
</div>
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 for more details.
Contributions are welcome! See CONTRIBUTING.md
to get started.
Our logo is based off an image from Font Awesome. Thanks!
3.0.0
Add the new required CSS import:
import 'react-loading-skeleton/dist/skeleton.css';
Read the full list of breaking changes to see if any affect you.
SkeletonTheme
using React context
SkeletonTheme
rendered a <div>
which was undesirable in many cases. The new SkeletonTheme
does not render any DOM elements.SkeletonTheme
did not work if the Skeleton
was rendered in a portal. The new SkeletonTheme
does work in this case.SkeletonTheme
: rename the color
prop to baseColor
If you need to support Internet Explorer or use an old version of React, please continue to use react-loading-skeleton
v2.
SkeletonTheme
direction
prop to support right-to-left animationenableAnimation
prop to allow disabling the animationcontainerClassName
prop to allow customizing the container elementcontainerTestId
to make testing easieraria-live
and aria-busy
attributes to the skeleton container to
improve screen reader supportbackground-position
property which made the browser repaint the gradient on every frame.transform
of a pseudoelement. This avoids repaints and results in an observable decrease in CPU usage.width
and height
to be set for the circle
prop to workduration
from 1.2 s to 1.5 sSkeleton
base color a tiny bit darker so that the animation is more visiblewidth
propwrapper
prop in the type definitionsFAQs
Make beautiful, animated loading skeletons that automatically adapt to your app.
The npm package react-loading-skeleton receives a total of 547,880 weekly downloads. As such, react-loading-skeleton popularity was classified as popular.
We found that react-loading-skeleton demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.