### Install react-content-loader with npm

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Use this command to install the library using npm.

```sh
npm i react-content-loader --save
```

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

### Install Dependencies

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Install project dependencies using npm or yarn.

```bash
$ npm i
```

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

### Install react-content-loader with yarn

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Use this command to install the library using yarn.

```sh
yarn add react-content-loader
```

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

### Clone Repository

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Clone the react-content-loader repository to your local machine to start development.

```bash
$ git clone git@github.com:YourUsername/react-content-loader.git && cd react-content-loader
```

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

### Install react-content-loader for React Native with npm

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Install react-content-loader and react-native-svg for React Native projects using npm.

```sh
npm i react-content-loader react-native-svg --save
```

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

### Install react-content-loader for React Native with yarn

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Install react-content-loader and react-native-svg for React Native projects using yarn.

```sh
yarn add react-content-loader react-native-svg
```

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

### Build Project

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Build the project for production.

```bash
$ npm run build
```

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

### Run Storybook

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Run Storybook to view your changes and test components.

```bash
$ npm run dev
```

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

### Responsive Loader with CSS and SVG

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Make loaders responsive by setting width to '100%' and using CSS for styling. The viewBox should be adjusted to match the aspect ratio.

```jsx
import ContentLoader, { Code } from 'react-content-loader'

// Responsive custom loader
const ResponsiveLoader = () => (
  <ContentLoader
    width="100%"
    height={100}
    viewBox="0 0 400 100"
    style={{ width: '100%' }}
  >
    <rect x="0" y="0" rx="4" ry="4" width="400" height="30" />
    <rect x="0" y="45" rx="4" ry="4" width="350" height="25" />
    <rect x="0" y="80" rx="4" ry="4" width="250" height="15" />
  </ContentLoader>
)

// Responsive preset
const ResponsiveCodeLoader = () => (
  <Code
    width={100}
    height={100}
    viewBox="0 0 100 100"
    style={{ width: '100%' }}
  />
)
```

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

### Run Tests

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Execute all tests, including type checking and unit tests for web and native platforms.

```bash
$ npm run test
```

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

### Responsive Code Loader

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Make the Code loader responsive by setting width, height, and viewBox attributes, and applying CSS style for width: '100%'.

```jsx
import { Code } from 'react-content-loader'

const MyCodeLoader = () => (
  <Code
    width={100}
    height={100}
    viewBox="0 0 100 100"
    style={{ width: '100%' }}
  />
)
```

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

### Use Preset ContentLoaders in React

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Import and use pre-defined content loader components like Facebook's style.

```jsx
import ContentLoader, { Facebook } from 'react-content-loader'

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />
```

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

### Use Facebook Preset Loader

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

The Facebook preset provides a pre-built loader that mimics Facebook's card loading skeleton. It includes a circular avatar and text lines.

```jsx
import { Facebook } from 'react-content-loader'

// Basic usage
const MyFacebookLoader = () => <Facebook />

// With custom props
const CustomFacebookLoader = () => (
  <Facebook
    backgroundColor="#e0e0e0"
    foregroundColor="#c0c0c0"
    speed={2}
  />
)
```

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

### Use List Preset Loader

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

The List preset is suitable for list-style content, providing hierarchical indentation. Custom styling can be applied using background and foreground color props.

```jsx
import { List } from 'react-content-loader'

// Basic usage
const MyListLoader = () => <List />

// With custom styling
const StyledListLoader = () => (
  <List
    backgroundColor="#f0f0f0"
    foregroundColor="#dedede"
  />
)
```

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

### Watch Unit Tests

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Run unit tests in watch mode for continuous testing during development.

```bash
$ npm run test:watch
```

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

### Use Instagram Preset Loader

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

The Instagram preset offers a pre-built loader simulating Instagram's post loading skeleton, featuring a circular avatar, text lines, and a large image placeholder.

```jsx
import { Instagram } from 'react-content-loader'

// Basic usage
const MyInstagramLoader = () => <Instagram />

// With dark theme
const DarkInstagramLoader = () => (
  <Instagram
    backgroundColor="#333"
    foregroundColor="#999"
    speed={1.5}
  />
)
```

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

### Use Code Preset Loader

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

The Code preset is designed for code block placeholders, featuring indented lines to mimic code structure. Animation can be disabled for static display.

```jsx
import { Code } from 'react-content-loader'

// Basic usage
const MyCodeLoader = () => <Code />

// With animation disabled
const StaticCodeLoader = () => <Code animate={false} />
```

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

### Facebook Style Loader

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Use the Facebook component for a Facebook-like content loader. Ensure 'react-content-loader' is imported.

```jsx
import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook />
```

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

### React Content Loader Options

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

This section details the available props for customizing the React Content Loader component.

```APIDOC
## React Content Loader Options

### Description
This section details the available props for customizing the React Content Loader component.

### Parameters
#### Props
- **`animate`** (boolean) - Optional - Defaults to `true`. Opt-out of animations with `false`.
- **`title`** (string) - Optional - Defaults to `Loading...`. Used to describe what element it is. Use `''` (empty string) to remove.
- **`baseUrl`** (string) - Optional - Defaults to an empty string. Required if you're using `<base url="" />` document `<head/>`. This prop is common used as: `<ContentLoader baseUrl={window.location.pathname} />` which will fill the SVG attribute with the relative path.
- **`speed`** (number) - Optional - Defaults to `1.2`. Animation speed in seconds.
- **`viewBox`** (string) - Optional - Defaults to `undefined`. Use viewBox props to set a custom viewBox value.
- **`gradientRatio`** (number) - Optional - Defaults to `1.2`. Width of the animated gradient as a fraction of the view box width.
- **`rtl`** (boolean) - Optional - Defaults to `false`. Content right-to-left.
- **`backgroundColor`** (string) - Optional - Defaults to `#f5f6f7`. Used as background of animation.
- **`foregroundColor`** (string) - Optional - Defaults to `#eee`. Used as the foreground of animation.
- **`backgroundOpacity`** (number) - Optional - Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari/iOS.

### Environment
- `animate`: React DOM, React Native
- `title`: React DOM only
- `baseUrl`: React DOM only
- `speed`: React DOM, React Native
- `viewBox`: React DOM, React Native
- `gradientRatio`: React DOM only
- `rtl`: React DOM, React Native
- `backgroundColor`: React DOM, React Native
- `foregroundColor`: React DOM, React Native
- `backgroundOpacity`: React DOM, React Native
```

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

### Custom Content Loader

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Create a custom content loader using the ContentLoader component and SVG shapes. Configure height, speed, and colors.

```jsx
const MyLoader = () => (
  <ContentLoader
    height={140}
    speed={1}
    backgroundColor={'#333'}
    foregroundColor={'#999'}
    viewBox="0 0 380 70">
    {/* Only SVG shapes */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)
```

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

### Customize Colors with Opacity

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Use backgroundColor and foregroundColor props to customize loader colors. Opacity can be controlled for both light and dark themes, ensuring Safari compatibility.

```jsx
import ContentLoader from 'react-content-loader'

// Dark theme loader
const DarkThemeLoader = () => (
  <ContentLoader
    backgroundColor="#1a1a1a"
    foregroundColor="#333"
    viewBox="0 0 300 60"
  >
    <rect x="0" y="0" rx="4" ry="4" width="300" height="20" />
    <rect x="0" y="35" rx="4" ry="4" width="220" height="20" />
  </ContentLoader>
)

// Semi-transparent loader (Safari compatible)
const TransparentLoader = () => (
  <ContentLoader
    backgroundColor="rgb(0,0,0)"
    foregroundColor="rgb(0,0,0)"
    backgroundOpacity={0.06}
    foregroundOpacity={0.12}
    viewBox="0 0 300 60"
  >
    <rect x="0" y="0" rx="4" ry="4" width="300" height="60" />
  </ContentLoader>
)
```

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

### Use Preset ContentLoaders in React Native

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Import and use pre-defined content loader components for React Native, similar to the web version.

```jsx
import ContentLoader, { Facebook } from 'react-content-loader/native'

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />
```

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

### List Style Loader

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Use the List component for a list-like content loader. Ensure 'react-content-loader' is imported.

```jsx
import { List } from 'react-content-loader'

const MyListLoader = () => <List />
```

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

### Use BulletList Preset Loader

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

The BulletList preset is for bullet list content, using circular bullets and text lines. It supports RTL (right-to-left) layout for languages like Arabic or Hebrew.

```jsx
import { BulletList } from 'react-content-loader'

// Basic usage
const MyBulletListLoader = () => <BulletList />

// RTL support for right-to-left languages
const RTLBulletList = () => <BulletList rtl />
```

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

### Code Style Loader

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Use the Code component for a code-snippet-like content loader. Ensure 'react-content-loader' is imported.

```jsx
import { Code } from 'react-content-loader'

const MyCodeLoader = () => <Code />
```

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

### Instagram Style Loader

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Use the Instagram component for an Instagram-like content loader. Ensure 'react-content-loader' is imported.

```jsx
import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () => <Instagram />
```

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

### SSR-Safe Loader with uniqueKey

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Employ the uniqueKey prop to prevent hydration mismatches during server-side rendering. This is crucial for consistent rendering between server and client.

```jsx
import ContentLoader, { Facebook } from 'react-content-loader'

// SSR-safe loader with unique key
const SSRLoader = ({ id }) => (
  <ContentLoader uniqueKey={`loader-${id}`} viewBox="0 0 300 60">
    <rect x="0" y="0" rx="4" ry="4" width="300" height="20" />
    <rect x="0" y="35" rx="4" ry="4" width="220" height="20" />
  </ContentLoader>
)

// SSR-safe preset
const SSRFacebookLoader = () => (
  <Facebook uniqueKey="facebook-loader-main" />
)
```

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

### Facebook Loader with Unique Key for SSR

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Fix SSR snapshot mismatches by providing a static 'uniqueKey' prop to the Facebook loader. This prevents random ID generation.

```jsx
import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook uniqueKey="my-random-value" />
```

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

### React Native Content Loader Presets and Customization

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Import ContentLoader and shapes from 'react-content-loader/native' for React Native. Use presets like Facebook or create custom loaders with SVG shapes like Circle and Rect. Custom colors and animation speed can also be configured.

```jsx
import ContentLoader, { Rect, Circle, Facebook } from 'react-content-loader/native'

// Using preset on React Native
const NativeFacebookLoader = () => <Facebook />

// Custom loader on React Native
const NativeCustomLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    <Circle cx="30" cy="30" r="30" />
    <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

// React Native with custom colors
const NativeDarkLoader = () => (
  <ContentLoader
    viewBox="0 0 300 100"
    backgroundColor="#1a1a1a"
    foregroundColor="#333"
    speed={1.5}
  >
    <Rect x="0" y="0" rx="5" ry="5" width="300" height="40" />
    <Rect x="0" y="55" rx="5" ry="5" width="200" height="40" />
  </ContentLoader>
)
```

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

### Generate Commit Messages

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Use 'yarn commit' or 'npm run commit' to interactively generate commit messages that follow the conventional commits specification, enabling automatic changelog generation.

```bash
yarn commit
```

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

### Handle Alpha Transparency in Safari/iOS

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

When using rgba for backgroundColor or foregroundColor, Safari/iOS may not respect the alpha channel. Use the rgb equivalent and move the alpha value to backgroundOpacity/foregroundOpacity props to ensure semi-transparent colors.

```jsx
<ContentLoader
  backgroundColor="rgba(0,0,0,0.06)"
  foregroundColor="rgba(0,0,0,0.12)">

```

```jsx
<ContentLoader
    backgroundColor="rgb(0,0,0)"
    foregroundColor="rgb(0,0,0)"
    backgroundOpacity={0.06}
    foregroundOpacity={0.12}>

```

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

### Create Custom ContentLoaders with SVG Shapes

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Use the ContentLoader component with SVG shapes as children to build custom loading animations. Customize appearance with props like viewBox, backgroundColor, foregroundColor, and speed.

```jsx
import ContentLoader from 'react-content-loader'

// Default Facebook-style loader
const DefaultLoader = () => <ContentLoader />

// Custom loader with SVG shapes
const CustomLoader = () => (
  <ContentLoader
    viewBox="0 0 380 70"
    backgroundColor="#f5f6f7"
    foregroundColor="#eee"
    speed={1.2}
  >
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

// Profile card loader
const ProfileCardLoader = () => (
  <ContentLoader viewBox="0 0 400 160">
    <circle cx="50" cy="50" r="40" />
    <rect x="110" y="20" rx="4" ry="4" width="250" height="15" />
    <rect x="110" y="50" rx="4" ry="4" width="180" height="12" />
    <rect x="110" y="75" rx="4" ry="4" width="220" height="12" />
    <rect x="20" y="120" rx="4" ry="4" width="360" height="25" />
  </ContentLoader>
)
```

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

### Create Custom ContentLoaders in React

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Define custom SVG shapes within the ContentLoader component for unique placeholder designs.

```jsx
const MyLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    {/* Only SVG shapes */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)
```

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

### Bullet List Style Loader

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Use the BulletList component for a bulleted list-like content loader. Ensure 'react-content-loader' is imported.

```jsx
import { BulletList } from 'react-content-loader'

const MyBulletListLoader = () => <BulletList />
```

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

### Accessibility Title Configuration

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Configure the title for screen readers using the title prop, or remove it entirely for decorative loaders by setting title to an empty string.

```jsx
import ContentLoader from 'react-content-loader'

// Custom accessibility title
const AccessibleLoader = () => (
  <ContentLoader title="Loading user profile..." viewBox="0 0 300 60">
    <rect x="0" y="0" rx="4" ry="4" width="300" height="60" />
  </ContentLoader>
)

// Remove title for decorative loaders
const DecorativeLoader = () => (
  <ContentLoader title="" viewBox="0 0 300 60">
    <rect x="0" y="0" rx="4" ry="4" width="300" height="60" />
  </ContentLoader>
)
```

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

### Control Animation Behavior

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Control animation speed, gradient ratio, and enable/disable animation using props like `animate`, `speed`, and `gradientRatio` on the ContentLoader component.

```jsx
import ContentLoader from 'react-content-loader'

// Disable animation for static skeleton
const StaticLoader = () => (
  <ContentLoader animate={false}>
    <rect x="0" y="0" rx="4" ry="4" width="200" height="20" />
  </ContentLoader>
)

// Fast animation
const FastLoader = () => (
  <ContentLoader speed={0.8}>
    <rect x="0" y="0" rx="4" ry="4" width="200" height="20" />
  </ContentLoader>
)

// Slow animation with wide gradient
const SlowWideGradientLoader = () => (
  <ContentLoader speed={3} gradientRatio={4}>
    <rect x="0" y="0" rx="4" ry="4" width="200" height="20" />
  </ContentLoader>
)
```

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

### Import ContentLoader in React Native

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Import ContentLoader and other components from a local clone of the react-content-loader repository within your React Native project.

```javascript
import ContentLoader, { Rect, Circle } from './react-content-loader/native'
```

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

### Fix SVG Gradient Rendering with baseUrl

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Use the baseUrl prop when your document head includes a `<base url='/' />` tag to resolve SVG gradient rendering issues.

```jsx
import ContentLoader from 'react-content-loader'

// Fix for base URL issues
const BaseUrlLoader = () => (
  <ContentLoader
    baseUrl={window.location.pathname}
    viewBox="0 0 300 60"
  >
    <rect x="0" y="0" rx="4" ry="4" width="300" height="60" />
  </ContentLoader>
)
```

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

### Create Custom ContentLoaders in React Native

Source: https://github.com/danilowoz/react-content-loader/blob/master/README.md

Define custom SVG shapes using imported Rect and Circle components from react-content-loader/native for React Native.

```jsx
import ContentLoader, { Rect, Circle } from 'react-content-loader/native'

const MyLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    <Circle cx="30" cy="30" r="30" />
    <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)
```

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

### RTL Support for Animations

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Enable right-to-left animation direction for RTL languages using the rtl prop. This affects the animation's direction across the loader.

```jsx
import ContentLoader, { BulletList } from 'react-content-loader'

// RTL custom loader
const RTLLoader = () => (
  <ContentLoader rtl viewBox="0 0 300 60">
    <rect x="0" y="0" rx="4" ry="4" width="300" height="20" />
    <rect x="80" y="35" rx="4" ry="4" width="220" height="20" />
  </ContentLoader>
)

// RTL preset
const RTLBulletList = () => <BulletList rtl />
```

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

### Add Borders with beforeMask

Source: https://context7.com/danilowoz/react-content-loader/llms.txt

Utilize the beforeMask prop to include SVG elements that render before the animated mask, ideal for adding borders or backgrounds to your loader.

```jsx
import ContentLoader from 'react-content-loader'

// Card with border using beforeMask
const CardWithBorderLoader = () => (
  <ContentLoader
    viewBox="0 0 300 88"
    beforeMask={
      <rect
        width="298"
        height="86"
        x="1"
        y="1"
        stroke="#dee0e3"
        strokeWidth="1"
        fill="#fff"
      />
    }
  >
    <rect x="12" y="13" rx="4" ry="4" width="20" height="20" />
    <rect x="40" y="16" rx="4" ry="4" width="80" height="14" />
    <rect x="12" y="41" rx="4" ry="4" width="270" height="12" />
    <rect x="12" y="61" rx="4" ry="4" width="270" height="12" />
  </ContentLoader>
)
```

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