### Clone and Run Example App (Web)

Source: https://github.com/mfrachet/rn-placeholder/blob/master/README.md

Instructions to clone the rn-placeholder repository, install dependencies, and run the example web application. This enables testing the library's functionality in a web browser environment.

```sh
$ git clone https://github.com/mfrachet/rn-placeholder
$ cd rn-placeholder
$ yarn
$ cd ./example-web && yarn && yarn start
```

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

### Clone and Run Example App (Mobile)

Source: https://github.com/mfrachet/rn-placeholder/blob/master/README.md

Instructions to clone the rn-placeholder repository, install dependencies, and run the example mobile application. This allows developers to test and explore the library's features locally.

```sh
$ git clone https://github.com/mfrachet/rn-placeholder
$ cd rn-placeholder
$ yarn
$ cd ./example && yarn && yarn start
```

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

### Install rn-placeholder with npm or yarn

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Install the rn-placeholder library using either npm or yarn package managers. No specific dependencies are required for installation itself.

```bash
yarn add rn-placeholder
```

```bash
npm install rn-placeholder
```

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

### Install rn-placeholder using Yarn

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/HOME.mdx

This command installs the rn-placeholder library into your project using the Yarn package manager. Ensure Yarn is installed and configured in your project.

```javascript
yarn add rn-placeholder
```

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

### onReady vs Conditional Rendering - React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/MIGRATING.mdx

Comparison between the old onReady prop approach and new conditional rendering pattern. Shows that simple conditional rendering (&& operator) replaces the need for onReady prop.

```javascript
const isDisplayed = true;

function App() {
  return <Placeholder onReady={isDisplayed} />;
}

// We even earn some space!
function App2() {
  return isDisplayed && <Placeholder />;
}
```

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

### Individual Line Customization - React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/MIGRATING.mdx

Demonstrates the new line-by-line customization API where each PlaceholderLine can have independent width, style, and other properties. Shows control over line count and styling.

```javascript
function App() {
  return (
    <Placeholder>
      <PlaceholderLine width={80} />
      <PlaceholderLine />
      <PlaceholderLine
        width={30}
        style={{ backgroundColor: "red" }}
      />
    </Placeholder>
 )
}
```

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

### Install RN Placeholder

Source: https://github.com/mfrachet/rn-placeholder/blob/master/README.md

This command installs the 'rn-placeholder' library using Yarn. It's a necessary step before using the library in your React Native project.

```bash
$ yarn add rn-placeholder
```

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

### Customizing Lines with firstLineWidth and lastLineWidth Props

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/migrating-from-previous-version/index.html

Illustrates how to customize individual lines within the placeholder using the `PlaceholderLine` component and its props like `width` and `style`. This provides greater control over line appearance compared to the previous `firstLineWidth` and `lastLineWidth` props.

```javascript
function App() { return ( <Placeholder> <PlaceholderLine width={80} /> <PlaceholderLine /> <PlaceholderLine width={30} style={{ backgroundColor: "red" }} /> </Placeholder> ) }
```

```javascript
function App() {

  return (

    <Placeholder>

      <PlaceholderLine width={80} />

      <PlaceholderLine />

      <PlaceholderLine

        width={30}

        style={{ backgroundColor: "red" }}

      />

    </Placeholder>

 )
```

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

### PlaceholderMedia Example in React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/COMPONENTS.mdx

Shows a basic implementation of PlaceholderMedia within a Placeholder. PlaceholderMedia is designed to represent media elements in a placeholder UI, such as images or avatars. It is typically used in conjunction with PlaceholderLine.

```javascript
function App() {
  return (
    <Placeholder>
      <PlaceholderMedia />
    </Placeholder>
    )
}
```

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

### PlaceholderLine Examples in React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/COMPONENTS.mdx

Demonstrates the usage of PlaceholderLine components within a Placeholder. PlaceholderLine creates visual lines for placeholder content and accepts a 'width' prop to control its length. Multiple PlaceholderLines can be stacked.

```javascript
function App() {
  return (
    <Placeholder>
      <PlaceholderLine width={80} />
      <PlaceholderLine
	style={{backgroundColor: 'green'}}
	/>
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}
```

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

### rn-placeholder v3 ImageContent Component Usage

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/migrating-from-previous-version/index.html

This snippet demonstrates the usage of the ImageContent component from the rn-placeholder library in version 3. It showcases how to configure placeholder properties such as size, animation, line numbers, line spacing, last line width, and the onReady callback.

```jsx
<Placeholder.ImageContent
  size={60}
  animate="fade"
  lineNumber={4}
  lineSpacing={5}
  lastLineWidth="30%"
  onReady={this.state.isReady}
>
  <Text>Placeholder has finished :D</Text>
</Placeholder.ImageContent>
```

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

### Implement Placeholder Component with Fade Animation in React

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/index.html

Demonstrates usage of the rn-placeholder library to create a loading placeholder UI with Fade animation and side media elements. Shows how to nest PlaceholderLine components with custom width percentages. Requires the rn-placeholder package and React Native environment, rendering placeholder content while actual data loads.

```javascript
function App() { return ( <Placeholder Animation={Fade} Left={PlaceholderMedia} Right={PlaceholderMedia} > <PlaceholderLine width={80} /> <PlaceholderLine /> <PlaceholderLine width={30} /> </Placeholder> ) }
```

```javascript
function App() {

  return (

    <Placeholder

      Animation={Fade}

      Left={PlaceholderMedia}

      Right={PlaceholderMedia}

    >

      <PlaceholderLine width={80} />

      <PlaceholderLine />

      <PlaceholderLine width={30} />

    </Placeholder>

    )

}
```

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

### Injecting Animations with Animation Prop

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/migrating-from-previous-version/index.html

Demonstrates how to inject animations using the `Animation` prop.  This allows for custom animations and increased composability within React.  It replaces the previous method of using string-based props for animations.

```javascript
function App() { return ( <Placeholder Animation={Fade}> <PlaceholderLine width={80} /> </Placeholder> ) }
```

```javascript
function App() {

  return (

    <Placeholder Animation={Fade}>

      <PlaceholderLine width={80} />

    </Placeholder>

  )

}
```

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

### Define Padding Utility Classes for Spacing

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/index.html

Creates reusable CSS utility classes for consistent padding and text alignment in UI components. The first class applies uniform 1rem padding, while the second adds centered text alignment alongside padding. Useful for maintaining design system consistency across different components.

```css
.css-q5fqw0{padding:1rem;}

.css-os96a3{padding:1rem;text-align:center;}
```

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

### Placeholder with Media and Lines in React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/COMPONENTS.mdx

Illustrates how to combine Placeholder, PlaceholderMedia, and PlaceholderLine for a more complex placeholder layout. This example utilizes PlaceholderMedia for both left and right content, alongside multiple PlaceholderLines for text content.

```javascript
function App() {
  return (
    <Placeholder
      Left={PlaceholderMedia}
      Right={PlaceholderMedia}
    >
      <PlaceholderLine width={80} />
      <PlaceholderLine />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}
```

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

### Inject Animation into Placeholder Component (JavaScript)

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/migrating-from-previous-version/index.html

Demonstrates how to use the 'Animation' prop of the Placeholder component to inject animations like 'Fade'. This prop enhances composability by allowing custom animations without modifying the library's core code.

```javascript
function App() {
  return (
    <Placeholder Animation={Fade}>
      <PlaceholderLine width={80} />
    </Placeholder>
  )
}
```

```javascript
function App() {

  return (

    <Placeholder Animation={Fade}>

      <PlaceholderLine width={80} />

    </Placeholder>

  )

}
```

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

### Placeholder CSS for IE10/IE11 Compatibility (CSS)

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/migrating-from-previous-version/index.html

Provides CSS hacks for Internet Explorer 10 and 11 to ensure placeholder visibility. It addresses the lack of support for '-webkit-text-fill-color' by using 'color: transparent' and adjusting the selection background color.

```css
/**
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
   * IE doesn't support '-webkit-text-fill-color'
   * So we use 'color: transparent' to make the text transparent on IE
   * Unlike other browsers, it doesn't affect caret color in IE
   */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }
  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
```

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

### Customize Placeholder Lines (JavaScript)

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/migrating-from-previous-version/index.html

Shows how to customize individual placeholder lines using the PlaceholderLine component. You can specify the width and apply styles like background color to each line independently, offering granular control over the placeholder's appearance.

```javascript
function App() {
  return (
    <Placeholder>
      <PlaceholderLine width={80} />
      <PlaceholderLine />
      <PlaceholderLine width={30} style={{ backgroundColor: "red" }} />
    </Placeholder>
  )
}
```

```javascript
function App() {

  return (

    <Placeholder>

      <PlaceholderLine width={80} />

      <PlaceholderLine />

      <PlaceholderLine

        width={30}

        style={{ backgroundColor: "red" }}

      />

    </Placeholder>

 ) 

}
```

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

### Create Responsive Flexbox Layout with Media Queries

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/index.html

Defines flexbox container styles with row direction that switches to column on mobile devices (max-width: 480px). Includes vendor prefixes for cross-browser compatibility and a companion class providing flex:1 for proportional child sizing. Essential for responsive component layouts in React Native Web projects.

```css
.css-1r98a9c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media only screen and (max-width:480px){.css-1r98a9c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}

.css-1rr4qq7{-webkit-flex:1;-ms-flex:1;flex:1;}
```

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

### Animation Component Injection - React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/MIGRATING.mdx

New v3 API showing how to inject animations through the Animation prop. Uses Fade component directly as a prop value, allowing custom animations to be created and injected easily.

```javascript
function App() {
  return (
    <Placeholder Animation={Fade}>
      <PlaceholderLine width={80} />
    </Placeholder>
  )
}
```

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

### Style Code Editor for Cross-Browser Text Fill Compatibility

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/index.html

Provides CSS rules for a code editor textarea to ensure placeholder text visibility across browsers. Includes Internet Explorer 10/11 specific hacks using media queries to handle lack of -webkit-text-fill-color support. Uses color: transparent for IE compatibility while preserving caret color functionality.

```css
/** 
 * Reset the text fill color so that placeholder is visible 
 */ 
.npm__react-simple-code-editor__textarea:empty { 
  -webkit-text-fill-color: inherit !important; 
} 
/** 
 * Hack to apply on some CSS on IE10 and IE11 
 */ 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
  /** 
   * IE doesn't support '-webkit-text-fill-color' 
   * So we use 'color: transparent' to make the text transparent on IE 
   * Unlike other browsers, it doesn't affect caret color in IE 
   */ 
  .npm__react-simple-code-editor__textarea { 
    color: transparent !important; 
  } 
  .npm__react-simple-code-editor__textarea::selection { 
    background-color: #accef7 !important; 
    color: transparent !important; 
  } 
}
```

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

### React Native Placeholder Line Example

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/animations/index.html

Demonstrates the basic usage of the PlaceholderLine component to create placeholder elements with specified widths. This component is part of a larger placeholder system, likely used for UI loading states.

```javascript
function App() {
  return (
    <Placeholder>
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
  );
}
```

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

### Layout Variations in React Native JSX

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Demonstrates different layout configurations for placeholders, including media placements and text-only setups, using rn-placeholder and Fade animation. Requires React and library components; no specific inputs beyond layout props. Renders varied placeholder structures; limited to static layout previews in React Native.

```jsx
import React from 'react';
import {
  Placeholder,
  PlaceholderLine,
  PlaceholderMedia,
  Fade
} from 'rn-placeholder';

// Media on left only
const LeftMediaLayout = () => (
  <Placeholder Left={PlaceholderMedia} Animation={Fade}>
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

// Media on right only
const RightMediaLayout = () => (
  <Placeholder Right={PlaceholderMedia} Animation={Fade}>
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

// Text only layout
const TextOnlyLayout = () => (
  <Placeholder Animation={Fade}>
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

// Both sides media
const BothMediaLayout = () => (
  <Placeholder
    Left={PlaceholderMedia}
    Right={PlaceholderMedia}
    Animation={Fade}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

export { LeftMediaLayout, RightMediaLayout, TextOnlyLayout, BothMediaLayout };
```

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

### Expose Webpack Build Information in Window Object

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/index.html

Embeds webpack compilation hash and chunk mapping data into the global window object for runtime access. Used by static site generators like Gatsby to track build versions and enable dynamic component loading. The data is wrapped in CDATA sections for proper HTML script tag compatibility.

```javascript
/*<![CDATA[*/window.pagePath="/";window.webpackCompilationHash="2d90f59975f49ae1d049";/*]]>*/
/*<![CDATA[*/window.___chunkMapping={"app":["/app-d1516e2c8f4f5f375292.js"],"component---src-templates-page-js":["/component---src-templates-page-js-acbfb48da923ffea9dad.js"]};/*]]>*/
```

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

### CSS for Textarea Placeholder Visibility

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/index.html

CSS styles to ensure placeholder text visibility in a code editor textarea. Includes vendor prefix handling and special adjustments for Internet Explorer browsers to maintain caret visibility while making text transparent.

```css
/* Reset the text fill color so that placeholder is visible */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/* Hack to apply on some CSS on IE10 and IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE doesn't support '-webkit-text-fill-color'
   * So we use 'color: transparent' to make the text transparent on IE
   * Unlike other browsers, it doesn't affect caret color in IE
   */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }

  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
```

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

### Conditional Rendering with Placeholder (JavaScript)

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/migrating-from-previous-version/index.html

Demonstrates two ways to conditionally render the Placeholder component in React Native using JavaScript. The first method uses a boolean variable to control visibility, while the second uses a logical AND operator for inline conditional rendering. This approach helps manage component display based on application state.

```javascript
const isDisplayed = true;

function App() {
  return <Placeholder onReady={isDisplayed} />;
}

// We even earn some space!

function App2() {
  return isDisplayed && <Placeholder />;
}
```

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

### Placeholder with Suspense Fallback (JavaScript)

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/migrating-from-previous-version/index.html

Illustrates a conceptual usage of the Suspense component with rn-placeholder in React Native, mimicking its web counterpart. The 'fallback' prop would display a Placeholder with lines while an asynchronous operation is in progress within the child component. This pattern is useful for managing loading states during data fetching.

```javascript
function App() {
  return (
    <Suspense
      fallback={
        <Placeholder>
          <PlaceholderLine />
        </Placeholder>
      }
    >
      <ComponentThatMakeAsynchronousOperation />
      {/* During the async computation, the fallback prop will be displayed instead of the children */}
    </Suspense>
  )
}
```

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

### Render Placeholder Component in React Native Web

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/index.html

A React component using the rn-placeholder library to display animated placeholder elements. It utilizes Fade animation and media placeholders on both sides. This snippet shows basic usage of placeholder lines with varying widths.

```jsx
function App() { return ( <Placeholder Animation={Fade} Left={PlaceholderMedia} Right={PlaceholderMedia} > <PlaceholderLine width={80} /> <PlaceholderLine /> <PlaceholderLine width={30} /> </Placeholder> ) }
```

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

### User list placeholder with data fetching (JSX)

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Implementation of a user list with placeholder loading state and error handling. Uses Shine animation from rn-placeholder library. Demonstrates fetching data from API and showing placeholders while loading.

```jsx
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import {
  Placeholder,
  PlaceholderMedia,
  PlaceholderLine,
  Shine
} from 'rn-placeholder';

const ItemPlaceholder = () => (
  <Placeholder
    Left={PlaceholderMedia}
    Animation={Shine}
    style={{ padding: 16 }}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine width={60} />
    <PlaceholderLine width={40} />
  </Placeholder>
);

const UserList = () => {
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return (
      <View>
        {[1, 2, 3, 4, 5].map(key => (
          <ItemPlaceholder key={key} />
        ))}
      </View>
    );
  }

  if (error) {
    return <Text>Error: {error}</Text>;
  }

  return (
    <FlatList
      data={users}
      keyExtractor={item => item.id.toString()}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text>{item.name}</Text>
          <Text>{item.email}</Text>
        </View>
      )}
    />
  );
};

export default UserList;
```

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

### ShineOverlay Animation Implementation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/ANIMATIONS.mdx

Applies a left-to-right overlay animation on placeholders. Works best on white backgrounds with gray lines due to styling limitations. Simple to implement but has visual constraints.

```jsx
function App() {
  return (
    <Placeholder Animation={ShineOverlay}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}
```

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

### Progressive Animation Implementation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/ANIMATIONS.mdx

Sequential progressive animation inspired by design systems. Provides smooth loading behavior across placeholder components. Implementation based on specific design patterns.

```jsx
function App() {
  return (
    <Placeholder Animation={Progressive}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}
```

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

### Basic Usage of RN Placeholder Components

Source: https://github.com/mfrachet/rn-placeholder/blob/master/README.md

Demonstrates how to import and use core components like Placeholder, PlaceholderMedia, and PlaceholderLine from 'rn-placeholder'. It shows how to structure a basic placeholder layout with animations.

```jsx
import {
  Placeholder,
  PlaceholderMedia,
  PlaceholderLine,
  Fade
} from "rn-placeholder";

const App = () => (
  <Placeholder
    Animation={Fade}
    Left={PlaceholderMedia}
    Right={PlaceholderMedia}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);
```

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

### Customizing Animation Properties

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/ANIMATIONS.mdx

Shows how to tweak existing animations by passing additional props. Important to spread existing props to avoid strange behaviors. Demonstrates customization of loader size and color.

```jsx
function App() {
  return (
    <Placeholder
    Animation={(props) => (
      <Loader {...props}
        size="large"
        color="#00ff00" />
      )}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}
```

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

### Shine Animation for Placeholders

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Illustrates the Shine animation, a shimmering effect that moves across placeholders. Customizable with duration and reverse props to control speed and direction. Input is JSX structure with Animation prop; output is placeholders with a shine effect.

```jsx
import React from 'react';
import {
  Placeholder,
  PlaceholderLine,
  PlaceholderMedia,
  Shine
} from 'rn-placeholder';

const ShineAnimation = () => (
  <Placeholder
    Left={PlaceholderMedia}
    Right={PlaceholderMedia}
    Animation={Shine}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

const ShineReverse = () => (
  <Placeholder
    Animation={(props) => <Shine {...props} reverse={true} />}
  >
    <PlaceholderLine width={70} />
    <PlaceholderLine width={90} />
  </Placeholder>
);

const CustomDurationShine = () => (
  <Placeholder
    Animation={(props) => <Shine {...props} duration={1000} reverse={false} />}
  >
    <PlaceholderLine width={60} />
  </Placeholder>
);

// Props:
// - duration: number (milliseconds, default: 750)
// - reverse: boolean (required, direction of shine)

export default ShineAnimation;
```

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

### PlaceholderMedia Component for Media Placeholders

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Shows the PlaceholderMedia component for image or avatar placeholders. It supports customization via size, isRound, and color props. Input is JSX structure; output is styled media placeholders (square or circular).

```jsx
import React from 'react';
import { Placeholder, PlaceholderMedia, PlaceholderLine } from 'rn-placeholder';

const MediaPlaceholder = () => (
  <Placeholder Left={PlaceholderMedia}>
    <PlaceholderLine width={80} />
    <PlaceholderLine width={60} />
  </Placeholder>
);

const AvatarPlaceholder = () => (
  <Placeholder>
    <PlaceholderMedia size={60} isRound={true} />
    <PlaceholderMedia size={80} isRound={false} color="#dedede" />
  </Placeholder>
);

// Props:
// - size: number (height/width in pixels, default: 40)
// - isRound: boolean (default: false)
// - color: string (default: "#efefef")
// - style: ViewProps["style"]
// - animationStyleProps: ViewProps["style"]

export default MediaPlaceholder;
```

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

### Basic Placeholder Component in React Native

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Demonstrates the basic usage of the Placeholder component, wrapping PlaceholderLine and PlaceholderMedia. It utilizes the Fade animation and positions media placeholders on the left and right. Inputs are JSX structure; outputs are rendered placeholder elements.

```jsx
import React from 'react';
import {
  Placeholder,
  PlaceholderLine,
  PlaceholderMedia,
  Fade
} from 'rn-placeholder';

const BasicPlaceholder = () => (
  <Placeholder
    Animation={Fade}
    Left={PlaceholderMedia}
    Right={PlaceholderMedia}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

export default BasicPlaceholder;
```

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

### Fade Animation Implementation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/ANIMATIONS.mdx

Implements the base fade animation that makes placeholders become clearer over time. Uses the Fade component from rn-placeholder. Takes no special parameters but requires proper component structure.

```jsx
function App() {
  return (
    <Placeholder Animation={Fade}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}
```

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

### React Native Placeholder with Shine Animation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/animations/index.html

Shows how to implement the Shine animation using the Placeholder component. This animation attempts to overcome ShineOverlay's limitations by animating individual placeholder elements, though its speed can vary with host size. It requires the Placeholder and PlaceholderLine components.

```javascript
function App() { return ( <Placeholder Animation={Shine}> <PlaceholderLine width={70} /> <PlaceholderLine width={50} /> <PlaceholderLine width={80} /> <PlaceholderLine width={30} /> </Placeholder> ) }
```

```javascript
function App() {

  return (

    <Placeholder Animation\={Shine}\>

      <PlaceholderLine width\={70} />


```

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

### PlaceholderLine Component for Text Placeholders

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Illustrates the PlaceholderLine component for rendering text-like placeholders. It accepts props like width, height, color, and noMargin to customize the appearance of the placeholder lines. Input is JSX structure; output is styled lines.

```jsx
import React from 'react';
import { Placeholder, PlaceholderLine } from 'rn-placeholder';

const TextPlaceholder = () => (
  <Placeholder>
    <PlaceholderLine width={80} />
    <PlaceholderLine width={100} />
    <PlaceholderLine width={30} />
    <PlaceholderLine height={20} width={60} color="#dedede" />
    <PlaceholderLine noMargin width={50} />
  </Placeholder>
);

// Props:
// - width: number (percentage, default: 100)
// - height: number (pixels, default: 12)
// - color: string (default: "#efefef")
// - noMargin: boolean (default: false)
// - style: ViewProps["style"]

export default TextPlaceholder;
```

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

### Loader Animation Implementation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/ANIMATIONS.mdx

Uses platform-specific ActivityIndicator for loading animations. Simple implementation that provides native loading behavior. Can be customized with additional props for size and color.

```jsx
function App() {
  return (
    <Placeholder Animation={Loader}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}
```

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

### Fade Animation for Placeholders

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Demonstrates the Fade animation, an opacity-based effect, applied to placeholder components. It accepts a duration prop to control the animation speed. Input is JSX structure with Animation prop; output is placeholders with fade effect.

```jsx
import React from 'react';
import {
  Placeholder,
  PlaceholderLine,
  PlaceholderMedia,
  Fade
} from 'rn-placeholder';

const FadeAnimation = () => (
  <Placeholder
    Left={PlaceholderMedia}
    Animation={Fade}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

const CustomDurationFade = () => (
  <Placeholder
    Animation={(props) => <Fade {...props} duration={1000} />}
  >
    <PlaceholderLine width={70} />
    <PlaceholderLine width={90} />
  </Placeholder>
);

// Props:
// - duration: number (milliseconds, default: 500)

export default FadeAnimation;
```

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

### Shine Animation Implementation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/ANIMATIONS.mdx

Individual component shine animation that overcomes ShineOverlay limitations. Animation speed varies based on component width. Requires careful timing for consistent behavior across components.

```jsx
function App() {
  return (
    <Placeholder Animation={Shine}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}
```

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

### React Native Placeholder with Loader Animation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/animations/index.html

Demonstrates how to use the Placeholder component with the built-in Loader animation. It displays several PlaceholderLine components to simulate content loading.

```javascript
function App() {
  return (
    <Placeholder Animation={Loader}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
  )
}
```

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

### Social media post placeholder with rn-placeholder (JSX)

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Complete implementation of a social media post placeholder with avatar, text lines, and image placeholder. Uses Fade animation from rn-placeholder library. Shows conditional rendering pattern while loading data.

```jsx
import React, { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import {
  Placeholder,
  PlaceholderMedia,
  PlaceholderLine,
  Fade
} from 'rn-placeholder';

const PostItem = ({ post }) => (
  <View style={styles.container}>
    <View style={styles.header}>
      <Image source={{ uri: post.avatar }} style={styles.avatar} />
      <View style={styles.headerText}>
        <Text style={styles.username}>{post.username}</Text>
        <Text style={styles.timestamp}>{post.timestamp}</Text>
      </View>
    </View>
    <Text style={styles.content}>{post.content}</Text>
    {post.image && (
      <Image source={{ uri: post.image }} style={styles.postImage} />
    )}
  </View>
);

const PostItemPlaceholder = () => (
  <View style={styles.container}>
    <Placeholder
      Animation={Fade}
      Left={() => <PlaceholderMedia size={50} isRound />}
    >
      <PlaceholderLine width={30} />
      <PlaceholderLine width={20} />
    </Placeholder>
    <Placeholder Animation={Fade}>
      <PlaceholderLine width={90} />
      <PlaceholderLine width={85} />
      <PlaceholderLine width={70} />
      <PlaceholderMedia
        style={{ width: '100%', height: 200, marginTop: 10 }}
      />
    </Placeholder>
  </View>
);

const PostList = () => {
  const [loading, setLoading] = useState(true);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Simulate API call
    setTimeout(() => {
      setPosts([
        {
          id: 1,
          username: 'John Doe',
          avatar: 'https://example.com/avatar.jpg',
          timestamp: '2 hours ago',
          content: 'Just finished an amazing project!',
          image: 'https://example.com/post.jpg'
        }
      ]);
      setLoading(false);
    }, 2000);
  }, []);

  if (loading) {
    return (
      <View>
        <PostItemPlaceholder />
        <PostItemPlaceholder />
        <PostItemPlaceholder />
      </View>
    );
  }

  return posts.map(post => <PostItem key={post.id} post={post} />);
};

const styles = StyleSheet.create({
  container: { padding: 16, backgroundColor: '#fff', marginBottom: 8 },
  header: { flexDirection: 'row', marginBottom: 12 },
  avatar: { width: 50, height: 50, borderRadius: 25 },
  headerText: { marginLeft: 12, justifyContent: 'center' },
  username: { fontWeight: 'bold', fontSize: 16 },
  timestamp: { color: '#666', fontSize: 12 },
  content: { fontSize: 14, lineHeight: 20, marginBottom: 12 },
  postImage: { width: '100%', height: 200, borderRadius: 8 }
});

export default PostList;
```

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

### Basic Placeholder Implementation in React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/website/pages/HOME.mdx

This JavaScript code demonstrates a basic implementation of a placeholder component in React Native using the rn-placeholder library. It utilizes Placeholder, PlaceholderLine, PlaceholderMedia, and the Fade animation. The output is a visual placeholder structure with lines and media placeholders.

```javascript
function App() {
  return (
    <Placeholder
      Animation={Fade}
      Left={PlaceholderMedia}
      Right={PlaceholderMedia}
    >
      <PlaceholderLine width={80} />
      <PlaceholderLine />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
}
```

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

### PlaceholderLine Usage in React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/components/index.html

Demonstrates the basic usage of the PlaceholderLine component within a Placeholder. It shows how to set the width and apply inline styles to customize the appearance of the placeholder line.

```javascript
function App() {
  return (
    <Placeholder>
      <PlaceholderLine width={80} />
      <PlaceholderLine style={{backgroundColor: 'green'}} />
      <PlaceholderLine width={30} />
    </Placeholder>
  )
}
```

```javascript
function App() {

  return (

    <Placeholder>

      <PlaceholderLine width={80} />

      <PlaceholderLine
	style={{backgroundColor: 'green'}}
	/>

      <PlaceholderLine width={30} />

    </Placeholder>

    )

}
```

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

### ShineOverlay Animation in React Native JSX

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Implements a full overlay shimmer effect on placeholders using the rn-placeholder library. Depends on React and rn-placeholder components; accepts animation props like reverse. Outputs animated placeholders; limited to visual loading states in React Native apps.

```jsx
import React from 'react';
import {
  Placeholder,
  PlaceholderLine,
  PlaceholderMedia,
  ShineOverlay
} from 'rn-placeholder';

const ShineOverlayAnimation = () => (
  <Placeholder
    Left={PlaceholderMedia}
    Right={PlaceholderMedia}
    Animation={ShineOverlay}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

const ShineOverlayReverse = () => (
  <Placeholder
    Animation={(props) => <ShineOverlay {...props} reverse={true} />}
  >
    <PlaceholderLine width={70} />
    <PlaceholderLine width={90} />
  </Placeholder>
);

export default ShineOverlayAnimation;
```

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

### Rendering PlaceholderLine Components in JSX

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/animations/index.html

This snippet shows how to use multiple PlaceholderLine components within a Placeholder container to create animated placeholder lines of varying widths. It requires the rn-placeholder library and is intended for React Native Web or native apps. Inputs are width props; outputs are rendered UI placeholders. Limitations include dependency on React Native environment.

```jsx
<PlaceholderLine width={50} />

<PlaceholderLine width={80} />

<PlaceholderLine width={30} />

</Placeholder>

)
```

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

### React Native Placeholder with ShineOverlay Animation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/animations/index.html

Illustrates the use of the ShineOverlay animation with the Placeholder component. This animation applies a left-to-right overlay effect, best suited for white backgrounds and gray lines without style customization. It requires the Placeholder and PlaceholderLine components.

```javascript
function App() { return ( <Placeholder Animation={ShineOverlay}> <PlaceholderLine width={70} /> <PlaceholderLine width={50} /> <PlaceholderLine width={80} /> <PlaceholderLine width={30} /> </Placeholder> ) }
```

```javascript
function App() {

  return (

    <Placeholder Animation\={ShineOverlay}\>

      <PlaceholderLine width\={70} />

      <PlaceholderLine width\={50} />

      <PlaceholderLine width\={80} />

      <PlaceholderLine width\={30} />

    </Placeholder\>

    )

}
```

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

### React Native Progressive Animation Placeholder

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/animations/index.html

Illustrates the implementation of the 'Progressive' animation for placeholders. This animation style offers a visually appealing way to indicate content loading, potentially mimicking a design system's approach.

```javascript
function App() {
  return (
    <Placeholder Animation={Progressive}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
  );
}
```

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

### ShineOverlay Animation in React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/animations/index.html

Shows the ShineOverlay animation in React Native using rn-placeholder. It applies a left-to-right overlay effect on placeholder lines. Depends on rn-placeholder library; takes width props for lines and renders an animated overlay. Limited to white backgrounds with gray lines, no custom styling.

```javascript
function App() { return ( <Placeholder Animation={ShineOverlay}> <PlaceholderLine width={70} /> <PlaceholderLine width={50} /> <PlaceholderLine width={80} /> <PlaceholderLine width={30} /> </Placeholder> ) }
```

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

### React Native Loader Animation Placeholder

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/animations/index.html

Shows how to use the 'Loader' animation with the Placeholder component to display a standard platform loader animation. This is useful for indicating ongoing background processes or data fetching.

```javascript
function App() {
  return (
    <Placeholder Animation={Loader}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
  );
}
```

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

### Create placeholder media blocks in React

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/components/index.html

Renders a rectangular placeholder block (PlaceholderMedia), typically used as Left/Right media placeholders inside the Placeholder container. Requires rn-placeholder components and a React environment.

```jsx
import { Placeholder, PlaceholderMedia } from 'rn-placeholder';

// Standalone media placeholder
function App() {
  return (
    <Placeholder>
      <PlaceholderMedia />
    </Placeholder>
  );
}

// Combined with lines and left/right media
function AppWithMedia() {
  return (
    <Placeholder Left={PlaceholderMedia} Right={PlaceholderMedia}>
      <PlaceholderLine width={80} />
      <PlaceholderLine />
      <PlaceholderLine width={30} />
    </Placeholder>
  );
}

export default App;
```

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

### React Native Customizing Loader Animation Props

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/animations/index.html

Demonstrates how to customize an existing animation, specifically the 'Loader', by passing additional props like 'size' and 'color'. It emphasizes the importance of spreading the original props from the Animation render function to ensure correct behavior.

```javascript
function App() {
  return (
    <Placeholder Animation={(props) => (
      <Loader {...props} size="large" color="#00ff00" />
    )}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
  );
}
```

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

### React Native Placeholder Customizing Loader Animation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/animations/index.html

Shows how to customize an existing animation, specifically the Loader animation, by passing additional props like 'size' and 'color'. It's crucial to spread the original props using {...props}.

```javascript
function App() {
  return (
    <Placeholder Animation={(props) => (
      <Loader {...props} size="large" color="#00ff00" />
    )}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
  )
}
```

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

### Fade Animation in React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/animations/index.html

Demonstrates the Fade animation in a React Native app using the rn-placeholder library. It renders placeholder lines within a Placeholder component animated with Fade. Requires rn-placeholder as a dependency and inputs widths for lines; outputs an animated loading placeholder view. Limitations include only working on specified intervals without customization.

```javascript
function App() { return ( <Placeholder Animation={Fade}> <PlaceholderLine width={70} /> <PlaceholderLine width={50} /> <PlaceholderLine width={80} /> <PlaceholderLine width={30} /> </Placeholder> ) }
```

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

### Shine Animation in React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/animations/index.html

Illustrates the Shine animation for rn-placeholder in React Native, animating different parts of placeholders sequentially. Uses the Placeholder and PlaceholderLine components with Shine prop. Requires rn-placeholder; inputs widths and outputs animated shine effect. Drawbacks include varying animation speed based on component width, not perfectly synchronized.

```javascript
function App() { return ( <Placeholder Animation={Shine}> <PlaceholderLine width={70} /> <PlaceholderLine width={50} /> <PlaceholderLine width={80} /> <PlaceholderLine width={30} /> </Placeholder> ) }
```

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

### Create placeholder lines in React

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/components/index.html

Renders animated placeholder lines with configurable width and style. Used inside the Placeholder container. Requires rn-placeholder components and a React environment.

```jsx
import { Placeholder, PlaceholderLine } from 'rn-placeholder';

function App() {
  return (
    <Placeholder>
      <PlaceholderLine width={80} />
      <PlaceholderLine style={{ backgroundColor: 'green' }} />
      <PlaceholderLine width={30} />
    </Placeholder>
  );
}

export default App;
```

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

### PlaceholderMedia Usage in React Native

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/components/index.html

Illustrates the use of the PlaceholderMedia component as a standalone element within a Placeholder. This is useful for representing media placeholders like images or avatars.

```javascript
function App() {
  return (
    <Placeholder>
      <PlaceholderMedia />
    </Placeholder>
  )
}
```

```javascript
function App() {

  return (

    <Placeholder>

      <PlaceholderMedia />

    </Placeholder>

    )

}
```

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

### CSS for React Simple Code Editor Placeholder Visibility

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/animations/index.html

This CSS handles text fill color resets for empty textareas in the react-simple-code-editor to ensure placeholder visibility, with IE10/IE11 hacks using transparent colors. It depends on the editor's class names and applies globally. Inputs are browser contexts; outputs are styled textareas. Limitations include browser-specific hacks and potential conflicts with other styles.

```css
/*
 * Reset the text fill color so that placeholder is visible
 */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/*
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /*
   * IE doesn't support '-webkit-text-fill-color'
   * So we use 'color: transparent' to make the text transparent on IE
   * Unlike other browsers, it doesn't affect caret color in IE
   */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }
  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
```

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

### CSS reset for react-simple-code-editor

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/components/index.html

Resets text fill color for the react-simple-code-editor textarea to make placeholders visible. Includes IE10/11 hacks for transparent text and selection colors. Apply alongside your component styles.

```css
/* Reset the text fill color so that placeholder is visible */
.npm__react-simple-code-editor__textarea:empty {
  -webkit-text-fill-color: inherit !important;
}

/* Hack to apply on some CSS on IE10 and IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
   * IE doesn't support '-webkit-text-fill-color'
   * So we use 'color: transparent' to make the text transparent on IE
   * Unlike other browsers, it doesn't affect caret color in IE
   */
  .npm__react-simple-code-editor__textarea {
    color: transparent !important;
  }
  .npm__react-simple-code-editor__textarea::selection {
    background-color: #accef7 !important;
    color: transparent !important;
  }
}
```

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

### React Native Placeholder with Progressive Animation

Source: https://github.com/mfrachet/rn-placeholder/blob/master/docs/public/animations/index.html

Illustrates the usage of the Placeholder component with the Progressive animation. Similar to the Loader animation, it uses PlaceholderLine to represent content.

```javascript
function App() {
  return (
    <Placeholder Animation={Progressive}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
  )
}
```

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

### Loader Animation in React Native JSX

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Adds an activity indicator overlay to placeholders via rn-placeholder. Built on React and React Native ActivityIndicator; supports standard props like size and color. Generates loading indicators; only functional within React Native app placeholders.

```jsx
import React from 'react';
import {
  Placeholder,
  PlaceholderLine,
  PlaceholderMedia,
  Loader
} from 'rn-placeholder';

const LoaderAnimation = () => (
  <Placeholder
    Left={PlaceholderMedia}
    Right={PlaceholderMedia}
    Animation={Loader}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

const CustomLoader = () => (
  <Placeholder
    Animation={(props) => <Loader {...props} size="large" color="#0000ff" />}
  >
    <PlaceholderLine width={70} />
    <PlaceholderLine width={90} />
  </Placeholder>
);

// Accepts all ActivityIndicatorProps from react-native

export default LoaderAnimation;
```

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

### Progressive Animation in React Native JSX

Source: https://context7.com/mfrachet/rn-placeholder/llms.txt

Creates a progressive loading effect from left to right on placeholders using rn-placeholder. Relies on React and library components; customizable with color prop. Produces sequential animation; restricted to placeholder rendering in React Native environments.

```jsx
import React from 'react';
import {
  Placeholder,
  PlaceholderLine,
  PlaceholderMedia,
  Progressive
} from 'rn-placeholder';

const ProgressiveAnimation = () => (
  <Placeholder
    Left={PlaceholderMedia}
    Right={PlaceholderMedia}
    Animation={Progressive}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

const CustomColorProgressive = () => (
  <Placeholder
    Animation={(props) => <Progressive {...props} color="rgba(255,0,0,0.2)" />}
  >
    <PlaceholderLine width={70} />
    <PlaceholderLine width={90} />
  </Placeholder>
);

// Props:
// - color: string (default: "rgba(0,0,0,0.1)")

export default ProgressiveAnimation;
```