Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/buildo/react-placeholder
A React component to easily replicate your page with nice placeholders while the content is loading
https://github.com/buildo/react-placeholder
react
Last synced: 1 day ago
JSON representation
A React component to easily replicate your page with nice placeholders while the content is loading
- Host: GitHub
- URL: https://github.com/buildo/react-placeholder
- Owner: buildo
- License: mit
- Created: 2015-06-28T13:19:43.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-09-13T12:45:26.000Z (about 1 year ago)
- Last Synced: 2024-11-27T20:03:15.379Z (16 days ago)
- Topics: react
- Language: TypeScript
- Homepage:
- Size: 3 MB
- Stars: 1,613
- Watchers: 23
- Forks: 97
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - react-placeholder
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!
```jsx
import ReactPlaceholder from 'react-placeholder';
import "react-placeholder/lib/reactPlaceholder.css";
React.renderComponent(
,
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
}>
```
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 = (
);
```
### 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';
This is a Test.
```
### 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".*