# react-placeholder

> A React component to easily replicate your page with nice placeholders while the content is loading

Latest version **4.1.0** (published 2021-02-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-placeholder
pnpm add react-placeholder
yarn add react-placeholder
bun add react-placeholder
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2021-02-05 |
| First published | 2015-06-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1608 |
| Author | Francesco Cioria |
| Maintainers | gabro, veej, giogonzo, tpetrucciani, aslug, malpenzibo |
| Keywords | react, react-component, placeholder, filler, loading, paragraph |

## Links

- npm: https://www.npmjs.com/package/react-placeholder
- Repository: https://github.com/buildo/react-placeholder
- Issues: https://github.com/buildo/react-placeholder/issues
- npm.io page: https://npm.io/package/react-placeholder

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.1.0 (latest) — 2021-02-05
- 4.0.3 — 2020-06-11
- 4.0.2 — 2020-06-01
- 4.0.1 — 2020-03-13
- 4.0.0 — 2020-02-29
- 3.0.2 — 2019-02-21
- 3.0.1 — 2018-05-08
- 3.0.0 — 2018-05-04
- 2.0.0 — 2017-12-20
- 1.0.10 — 2017-12-15
- 1.0.9 — 2017-11-28
- 1.0.8 — 2017-10-25
- 1.0.7 — 2017-10-16
- 1.0.6 — 2017-08-03
- 1.0.5 — 2017-06-26
- … 8 more at https://npm.io/package/react-placeholder/versions

## README

# React Placeholder
A React component to easily replicate your page with nice placeholders while the content is loading.
You can use a placeholder from the default set, or pass your own!

![image](https://cloud.githubusercontent.com/assets/691940/24140211/78406120-0e1f-11e7-9738-af2b2434c50e.png)

```jsx
import ReactPlaceholder from 'react-placeholder';
import "react-placeholder/lib/reactPlaceholder.css";

React.renderComponent(
  <div>
    <ReactPlaceholder type='media' rows={7} ready={this.state.ready}>
      <MyComponent />
    </ReactPlaceholder>
  </div>,
  document.body);
```

[**Live Demo**](http://buildo.github.io/react-placeholder/#!/ReactPlaceholder)

### Install
```
npm install --save react-placeholder
```

### Props

```tsx
children:              ReactNode;
ready:                 boolean;
delay?:                number;
firstLaunchOnly?:      boolean;
showLoadingAnimation?: boolean;
type?:                 'text' | 'media' | 'textRow' | 'rect' | 'round';
rows?:                 number;
color?:                string;
customPlaceholder?:    ReactElement;
className?:            string;
style?:                CSSProperties;
```

The default props will render a `text` placeholder with `3` rows and the color `#CDCDCD`.

### Customization
If the built-in set of placeholders is not enough, you can pass you own through the prop **"customPlaceholder"**

```jsx
<ReactPlaceholder ready={this.state.ready} customPlaceholder={<MyCustomPlaceholder />}>
  <MyComponent />
</ReactPlaceholder>
```

You can also import the built-in placeholders directly. This might be useful to use them to create your own customized placeholder:

```jsx
import {TextBlock, MediaBlock, TextRow, RectShape, RoundShape} from 'react-placeholder/lib/placeholders';

const awesomePlaceholder = (
  <div className='my-awesome-placeholder'>
    <RectShape color='blue' style={{width: 30, height: 80}}/>
    <TextBlock rows={7} color='yellow'/>
  </div>
);

<ReactPlaceholder ready={this.state.ready} customPlaceholder={awesomePlaceholder}>
  <MyComponent />
</ReactPlaceholder>
```

### Delay
You can pass an optional `delay` prop which specifies the time (in milliseconds) `react-placeholder` should wait before displaying the placeholder element. This is useful if you want to show a placeholder for slower connections while avoiding a brief "flash" on faster connections.

Note that this delay will __not__ affect the initial render, only subsequent "ready" state changes. Setting the `firstLaunchOnly` prop to `true` will also disable this feature.

### Animation
`react-placeholder` already comes with one default pulse animation to better tell the user that the page is loading.
The animation is defined in a separate CSS file so, in order to enable it, you should import that style in your project like this:

```js
import 'react-placeholder/lib/reactPlaceholder.css';
```

Once you've done this, you can simply pass the boolean prop `showLoadingAnimation` to tell `ReactPlaceholder` to animate itself:

```jsx
import 'react-placeholder/lib/reactPlaceholder.css';

<ReactPlaceholder showLoadingAnimation ready={this.state.ready} type="media" rows={5}>
  <p>This is a Test.</p>
</ReactPlaceholder>
```

### Style
you can style the placeholder by passing **```className```** or **```style```** or by using the built-in classes:

*"text-block", "media-block", "text-row", "rect-shape", "round-shape".*

---
_Source: https://npm.io/package/react-placeholder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._