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

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

React.renderComponent(


,
document.body);
`

Live Demo

$3

`
npm install --save react-placeholder
`

$3

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

$3

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

`jsx
}>


`

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 = (


);




`

$3


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.

$3


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';




This is a Test.



`

$3

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