https://github.com/sambernard/react-preload
Component to preload images before showing content
https://github.com/sambernard/react-preload
Last synced: 5 months ago
JSON representation
Component to preload images before showing content
- Host: GitHub
- URL: https://github.com/sambernard/react-preload
- Owner: sambernard
- License: mit
- Created: 2015-06-05T05:20:49.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-10-30T21:36:38.000Z (about 7 years ago)
- Last Synced: 2024-11-10T20:41:49.169Z (about 1 year ago)
- Language: JavaScript
- Size: 43 KB
- Stars: 148
- Watchers: 4
- Forks: 48
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Preload
[](http://badge.fury.io/js/react-preload)
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.
## Installation
### npm
```bash
npm install react-preload --save
```
## Usage
```javascript
var Preload = require('react-preload').Preload;
```
```javascript
var loadingIndicator = (
Loading...);
var images = [];
{/* content to be rendered once loading is complete */}
```
## Prop types
```javascript
propTypes: {
// Rendered on success
children: PropTypes.element.isRequired,
// Rendered during load
loadingIndicator: PropTypes.node.isRequired, // Default: null
// Array of image urls to be preloaded
images: PropTypes.array, // Default: []
// 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, // Default: true
// Whether or not we should mount the child content after
// images have finished loading (or after autoResolveDelay)
mountChildren: PropTypes.bool, // Default: true
}
```
## Additional Details
This module also exposes `ImageCache` and `ImageHelper` which can be used to preload images
directly, and can be accessed via `require('react-preload').ImageCache` and
`require('react-preload').ImageHelper` respectively.
## License
[MIT][mit-license]
[mit-license]: ./LICENSE