Skip to content
A React component to easily replicate your page with nice placeholders while the content is loading
Branch: master
Clone or download
Latest commit 8b1a164 Feb 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs update gh-pages Dec 13, 2017
examples refactor in TypeScript May 4, 2018
src don't override user styles Feb 7, 2019
styleguide refactor in TypeScript May 4, 2018
tests add test for build output May 8, 2018
.gitignore refactor in TypeScript May 4, 2018
.hophoprc add .hophoprc Mar 21, 2017
CHANGELOG.md 3.0.2 Feb 21, 2019
LICENSE added LICENSE Jun 28, 2015
README.md Fix missing assignment typo Feb 11, 2018
package.json 3.0.2 Feb 21, 2019
styleguide.config.js refactor in TypeScript May 4, 2018
tsconfig.json refactor in TypeScript May 4, 2018
webpack.config.js refactor in TypeScript May 4, 2018

README.md

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

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

Install

npm install --save react-placeholder

Props

children:             PropTypes.oneOfType([
                         PropTypes.node,
                         PropTypes.element
                      ]).isRequired,
ready:                PropTypes.bool.isRequired,
delay:                PropTypes.number,
firstLaunchOnly:      PropTypes.bool,
showLoadingAnimation: PropTypes.bool,
type:                 PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
rows:                 PropTypes.number,
color:                PropTypes.string,
customPlaceholder:    PropTypes.oneOfType([
                         PropTypes.node,
                         PropTypes.element
                      ])

Customization

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

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

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:

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:

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".

You can’t perform that action at this time.