### Installation

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Install the react-loading-skeleton library using either Yarn or npm.

```bash
yarn add react-loading-skeleton
npm install react-loading-skeleton
```

--------------------------------

### Custom Wrapper Example

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Demonstrates two methods for wrapping a Skeleton component within a custom container component.

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

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

--------------------------------

### Component Integration Example

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Shows how to integrate the Skeleton component directly into your React components to replace content while loading. The skeleton automatically adapts to the surrounding styles.

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

--------------------------------

### Custom Highlight Background Example

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Shows how to customize the skeleton's highlight gradient using the `customHighlightBackground` prop.

```tsx
<Skeleton customHighlightBackground="linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)" />
```

--------------------------------

### Development Commands

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/CONTRIBUTING.md

Commands for setting up the development environment, checking types, building the project, running tests, linting, and launching Storybook.

```bash
yarn install
yarn setup
yarn tsc
yarn build
yarn test
yarn lint
yarn storybook
```

--------------------------------

### Publishing Commands

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/CONTRIBUTING.md

Steps and commands for publishing a new version of the react-loading-skeleton package, including version bumping, tagging, and publishing to npm.

```shell
git push --tags
yarn npm publish
yarn npm publish --tag next
```

--------------------------------

### Basic Skeleton Usage

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Demonstrates how to import and use the Skeleton component for single-line or multi-line loading states.

```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
```

--------------------------------

### Theming Skeletons

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Illustrates how to customize the appearance of skeletons using the SkeletonTheme component. This allows for global theming of all skeleton components nested within it.

```tsx
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

return (
  <SkeletonTheme baseColor="#202020" highlightColor="#444">
    <p>
      <Skeleton count={3} />
    </p>
  </SkeletonTheme>
);
```

--------------------------------

### Troubleshooting: Height Discrepancy with Line Height

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Explains a common issue where the parent container's height is slightly off due to CSS `line-height` and suggests setting `line-height` to 1 for exact sizing.

```tsx
<div>
  <Skeleton height={30} />
</div>

// To make the div exactly 30px tall:
<div style={{ lineHeight: 1 }}>
  <Skeleton height={30} />
</div>
```

--------------------------------

### Skeleton Component Props

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Defines the properties available for the Skeleton component, controlling its appearance, animation, and behavior.

```APIDOC
Skeleton Component Props:

baseColor?: string
  The background color of the skeleton.
  Default: #ebebeb

highlightColor?: string
  The highlight color in the skeleton animation.
  Default: #f5f5f5

width?: string | number
  The width of the skeleton.
  Default: 100%

height?: string | number
  The height of each skeleton line.
  Default: The font size

borderRadius?: string | number
  The border radius of the skeleton.
  Default: 0.25rem

inline?: boolean
  If true, no line breaks are inserted after each skeleton.
  Default: false

duration?: number
  The length of the animation in seconds.
  Default: 1.5

direction?: 'ltr' | 'rtl'
  The direction of the animation (left-to-right or right-to-left).
  Default: 'ltr'

enableAnimation?: boolean
  Whether the animation should play. If false, the skeleton will be a solid color.
  Default: true

customHighlightBackground?: string
  Allows overriding the background-image property of the highlight element for custom gradient effects. If used, baseColor and highlightColor props are ignored.
  Default: undefined
```

--------------------------------

### Troubleshooting: Skeleton Width with Flexbox

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Addresses an issue where Skeleton width is 0 when its parent has `display: flex`, and provides a solution using `containerClassName`.

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

// Solution with Tailwind CSS:
<div style={{ display: 'flex' }}>
  <Skeleton containerClassName="flex-1" />
</div>
```

--------------------------------

### Skeleton Component Props

Source: https://github.com/dvtng/react-loading-skeleton/blob/master/README.md

Details the available props for the Skeleton component in React Loading Skeleton. This includes controlling the number of skeleton lines, applying custom wrappers, enabling circular skeletons, and managing class names and test IDs for styling and testing.

```react
Skeleton Component Props:

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.
  - Default: 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%.
  - Default: 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.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.