react-placeholder

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!

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

you can find more examples here

Install

npm install --save react-placeholder

Props

children:             PropTypes.oneOfType([
                         PropTypes.node,
                         PropTypes.element
                      ]).isRequired,
ready:                PropTypes.bool.isRequired,
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>

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