https://github.com/spoonx/react-preloaded
Show a placeholder while images are being preloaded.
https://github.com/spoonx/react-preloaded
Last synced: about 1 year ago
JSON representation
Show a placeholder while images are being preloaded.
- Host: GitHub
- URL: https://github.com/spoonx/react-preloaded
- Owner: SpoonX
- License: other
- Created: 2017-10-26T12:41:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-13T12:01:12.000Z (over 8 years ago)
- Last Synced: 2025-05-26T01:11:48.002Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 65.4 KB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Preload
[](http://badge.fury.io/js/react-preloaded)
A React component to preload images. It renders a passed component during the loader phase, and renders its children once the images have been successfully fetched.
This repository was forked from [Sam Bernard](https://github.com/sambernard/react-preload).
## Installation
### npm
```bash
npm install react-preloaded --save
```
## Usage
```js
var Preload = require('react-preloaded').Preload;
```
```js
var loadingIndicator = (
Loading...);
var images = [];
{/* content to be rendered once loading is complete*/}
```
## Prop types
```js
propTypes: {
//Rendered on success
children: PropTypes.element.isRequired,
//Rendered during load
loadingIndicator: PropTypes.node,
//Array of image urls to be preloaded
images: PropTypes.array,
//If set, the preloader will automatically show
//the children content after this amount of time
autoResolveDelay: PropTypes.number,
//Error callback. Is passed the error
onError: PropTypes.func,
//Success callback
onSuccess: PropTypes.func,
//Whether or not we should still show the content
//even if there is a preloading error
resolveOnError: PropTypes.bool
//Whether or not we should mount the child content after
//images have finished loading (or after autoResolveDelay)
mountChildren: PropTypes.bool
}
```
## Additional Details
This module also exposes `ImageCache` and `ImageHelper` which can be used to preload images
directly, and can be accessed via `require('react-preloaded').ImageCache` and
`require('react-preloaded').ImageHelper` respectively.
## License
[MIT][mit-license]
[mit-license]: ./LICENSE