react-loading-skeleton，react中skeleton的简单应用## Basic Usage Ins

## Basic Usage

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

function BlogPost(props) {
  return (
    <div>
      <h1>{props.title || <Skeleton />}</h1>
      {props.body || <Skeleton count={10} />}
    </div>
  );
}

Theming

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>
);

Props Reference

`Skeleton` only

Prop	Description	Default
`count?: number`	The number of lines of skeletons to render. If `count` is a decimal number like 3.5, three full skeletons and one half-width skeleton will be rendered.	`1`
`wrapper?: React.FunctionComponent <PropsWithChildren<unknown>>`	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`

Examples

Custom Wrapper

There are two ways to wrap a skeleton in a container:

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>
  );
}

// Method 1: Use the wrapper prop
const wrapped1 = <Skeleton wrapper={Box} count={5} />;

// Method 2: Do it "the normal way"
const wrapped2 = (
  <Box>
    <Skeleton />
  </Box>
);

Troubleshooting

The skeleton width is 0 when the parent has `display: flex`!

In the example below, the width of the skeleton will be 0:

<div style={{ display: 'flex' }}>
  <Skeleton />
</div>

This happens because the skeleton has no intrinsic width. You can fix it by applying flex: 1 to the skeleton container via the containerClassName prop.

For example, if you are using Tailwind, your code would look like this:

<div style={{ display: 'flex' }}>
  <Skeleton containerClassName="flex-1" />
</div>

The height of my container is off by a few pixels!

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>

react-loading-skeleton，react中skeleton的简单应用