",
27 | "license": "MIT",
28 | "bugs": {
29 | "url": "https://github.com/DeedMob/react-load-image/issues"
30 | },
31 | "homepage": "https://github.com/DeedMob/react-load-image",
32 | "devDependencies": {
33 | "babel-cli": "^6.24.0",
34 | "babel-core": "^6.25.0",
35 | "babel-eslint": "^3.1.16",
36 | "babel-loader": "^7",
37 | "babel-preset-es2015": "^6.24.1",
38 | "babel-preset-react": "^6.24.1",
39 | "babel-preset-stage-0": "^6.24.1",
40 | "babel-runtime": "^5.5.8",
41 | "chai": "^3.0.0",
42 | "eslint": "^0.23.0",
43 | "eslint-plugin-react": "^2.5.2",
44 | "express": "^4.12.4",
45 | "git-release-notes": "0.0.2",
46 | "mocha": "^2.2.5",
47 | "mversion": "^1.10.0",
48 | "node-libs-browser": "^0.5.2",
49 | "onchange": "^3.2.1",
50 | "opn": "^2.0.1",
51 | "prop-types": "^15.6.0",
52 | "react": "^16.0.0",
53 | "react-dom": "^16.0.0",
54 | "webpack": "^3.3.0",
55 | "webpack-dev-middleware": "^1.0.11",
56 | "yargs": "^3.11.0"
57 | },
58 | "peerDependencies": {
59 | "prop-types": "^15.6.0",
60 | "react": "^16.0.0"
61 | },
62 | "dependencies": {}
63 | }
64 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const Status = {
5 | PENDING: 'pending',
6 | LOADING: 'loading',
7 | LOADED: 'loaded',
8 | FAILED: 'failed',
9 | };
10 |
11 | export default class ImageLoader extends React.Component {
12 | static propTypes = {
13 | src: PropTypes.string.isRequired,
14 | srcSet: PropTypes.string,
15 | onLoad: PropTypes.func,
16 | onError: PropTypes.func,
17 | children: PropTypes.arrayOf(PropTypes.node),
18 | // Allow any extras
19 | };
20 |
21 | constructor(props) {
22 | super(props);
23 | this.state = {status: props.src ? Status.LOADING : Status.PENDING};
24 | if(React.Children.count(props.children) !== 3)
25 | console.error('wrong # of children provided to ImageLoader')
26 | }
27 |
28 | componentDidMount() {
29 | if (this.state.status === Status.LOADING) {
30 | this.createLoader();
31 | }
32 | }
33 |
34 | componentWillReceiveProps(nextProps) {
35 | if (this.props.src !== nextProps.src) {
36 | this.setState({
37 | status: nextProps.src ? Status.LOADING : Status.PENDING,
38 | });
39 | }
40 | }
41 |
42 | componentDidUpdate() {
43 | if (this.state.status === Status.LOADING && !this.img) {
44 | this.createLoader();
45 | }
46 | }
47 |
48 | componentWillUnmount() {
49 | this.destroyLoader();
50 | }
51 |
52 | createLoader() {
53 | this.destroyLoader(); // We can only have one loader at a time.
54 |
55 | const img = new Image();
56 | img.onload = ::this.handleLoad;
57 | img.onerror = ::this.handleError;
58 | img.src = this.props.src;
59 |
60 | // if srcSet is not passed in then use src for srcset
61 | // Setting srcset to a non-string is a bad idea. E.g. img.srcset = undefined actually sets srcset to the string "undefined", causing a load failure)
62 | img.srcset = this.props.srcSet || this.props.src;
63 | this.img = img;
64 | }
65 |
66 | destroyLoader() {
67 | if (this.img) {
68 | this.img.onload = null;
69 | this.img.onerror = null;
70 | this.img = null;
71 | }
72 | }
73 |
74 | handleLoad(event) {
75 | this.destroyLoader();
76 | this.setState({status: Status.LOADED});
77 |
78 | if (this.props.onLoad) this.props.onLoad(event);
79 | }
80 |
81 | handleError(error) {
82 | this.destroyLoader();
83 | this.setState({status: Status.FAILED});
84 |
85 | if (this.props.onError) this.props.onError(error);
86 | }
87 |
88 | getClassName() {
89 | let className = `imageloader imageloader-${this.state.status}`;
90 | if (this.props.className) className = `${className} ${this.props.className}`;
91 | return className;
92 | }
93 |
94 |
95 | render() {
96 | const { src, srcSet, onLoad, onError, wrapperProps, children } = this.props;
97 | const childrenArray = React.Children.toArray(children);
98 |
99 | return (
100 |
101 | {this.state.status === Status.LOADED &&
102 | React.cloneElement(childrenArray[0], { src, srcSet })
103 | }
104 | {this.state.status === Status.FAILED &&
105 | childrenArray[1]
106 | }
107 | {(this.state.status === Status.LOADING || this.state.status === Status.PENDING) &&
108 | childrenArray[2]
109 | }
110 |
111 | )
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | module.exports = {
5 | module: {
6 | rules: [
7 | {
8 | test: /\.js$/,
9 | exclude: /node_modules/,
10 | use: 'babel-loader'
11 | },
12 | ],
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
;
27 | }
28 |
29 | React.render((
30 |