A React component to easily replicate your page with nice placeholders while the content is loading
npm install react-placeholder``jsx
import ReactPlaceholder from 'react-placeholder';
import "react-placeholder/lib/reactPlaceholder.css";
React.renderComponent(
$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".