├── .gitignore
├── nwb.config.js
├── package.json
├── LICENSE
├── demo
    └── src
    │   └── index.js
├── src
    └── index.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | /demo/dist
2 | /es
3 | /lib
4 | /node_modules
5 | /umd
6 | npm-debug.log*
7 | .DS_Store
8 | 


--------------------------------------------------------------------------------
/nwb.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   type: 'react-component',
 3 |   npm: {
 4 |     esModules: true,
 5 |     umd: {
 6 |       global: 'ReactPreloadImage',
 7 |       externals: {
 8 |         react: 'React'
 9 |       }
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-preload-image",
 3 |   "version": "1.0.8",
 4 |   "description": "Preload and fade in an image. Optional support for lazy loading.",
 5 |   "main": "lib/index.js",
 6 |   "module": "es/index.js",
 7 |   "files": [
 8 |     "css",
 9 |     "es",
10 |     "lib",
11 |     "umd"
12 |   ],
13 |   "scripts": {
14 |     "build": "nwb build-react-component",
15 |     "clean": "nwb clean-module && nwb clean-demo",
16 |     "start": "nwb serve-react-demo"
17 |   },
18 |   "dependencies": {},
19 |   "peerDependencies": {
20 |     "react": "17.x"
21 |   },
22 |   "devDependencies": {
23 |     "nwb": "0.25.x",
24 |     "react": "^16.3.2",
25 |     "react-dom": "^16.3.2"
26 |   },
27 |   "author": "Stelios Constantinides <sconstantinides@gmail.com>",
28 |   "license": "MIT",
29 |   "repository": "https://github.com/sconstantinides/react-preload-image",
30 |   "keywords": [
31 |     "react",
32 |     "preload",
33 |     "load",
34 |     "image",
35 |     "lazy",
36 |     "loading"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2020 Stelios Constantinides
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from 'react-dom';
 3 | 
 4 | import PreloadImage from '../../src';
 5 | 
 6 | class Demo extends React.Component {
 7 |   render() {
 8 |     return (
 9 |       <div>
10 |         <PreloadImage
11 |           style={{
12 |             position: 'relative',
13 |             width: '600px',
14 |             height: '500px',
15 |             backgroundColor: '#222222'
16 |           }}
17 |           src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Ailurus_fulgens_-_Syracuse_Zoo.jpg"
18 |         />
19 | 
20 |         <PreloadImage
21 |           style={{
22 |             position: 'relative',
23 |             width: '25vw',
24 |             height: '25vw',
25 |             backgroundColor: '#222222'
26 |           }}
27 |           innerStyle={{
28 |             backgroundSize: '50%',
29 |             backgroundPosition: 'left',
30 |             backgroundRepeat: 'repeat'
31 |           }}
32 |           src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Ailurus_fulgens_-_Syracuse_Zoo.jpg"
33 |         />
34 |       </div>
35 |     );
36 |   }
37 | }
38 | 
39 | render(<Demo/>, document.querySelector('#demo'));
40 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class PreloadImage extends React.Component {
 4 |   constructor(props) {
 5 |     super(props);
 6 |     this.state = {
 7 |       loaded: false,
 8 |       src: null
 9 |     };
10 |   }
11 | 
12 |   componentDidMount() {
13 |     if (this.props.lazy && 'IntersectionObserver' in window) {
14 |       this.setObserver();
15 |     } else {
16 |       this.setPreloader();
17 |     }
18 |   }
19 | 
20 |   setObserver() {
21 |     this.observer = new IntersectionObserver((entries) => {
22 |       entries.forEach((entry) => {
23 |         if (entry.isIntersecting) {
24 |           this.setPreloader();
25 |           this.observer.disconnect();
26 |         }
27 |       });
28 |     });
29 | 
30 |     this.observer.observe(this.el);
31 |   }
32 | 
33 |   setPreloader() {
34 |     this.preloader = new Image();
35 | 
36 |     this.preloader.onload = () => this.setState({
37 |       loaded: true,
38 |       src: `url(${this.props.src})`
39 |     });
40 | 
41 |     this.preloader.src = this.props.src;
42 |   }
43 | 
44 |   componentWillUnmount() {
45 |     if (this.observer) this.observer.disconnect();
46 |     if (this.preloader) this.preloader.onload = null;
47 |   }
48 | 
49 |   render() {
50 |     const backgroundSize = this.props.innerStyle && this.props.innerStyle.backgroundSize ? this.props.innerStyle.backgroundSize : "cover";
51 |     const backgroundPosition = this.props.innerStyle && this.props.innerStyle.backgroundPosition ? this.props.innerStyle.backgroundPosition : "center";
52 |     const backgroundRepeat = this.props.innerStyle && this.props.innerStyle.backgroundRepeat ? this.props.innerStyle.backgroundRepeat : "no-repeat";
53 | 
54 |     return (
55 |       <div
56 |         // Required: Relative, absolute, or fixed position
57 |         // Required: Width & height (explicitly or via top/right/bottom/left)
58 |         // Optional: Background color or placeholder image
59 |         className={this.props.className}
60 |         style={{ ...this.props.style }}
61 |         ref={(el) => this.el = el}
62 |       >
63 |         <div style={{
64 |           position: 'absolute',
65 |           top: 0,
66 |           right: 0,
67 |           bottom: 0,
68 |           left: 0,
69 |           backgroundImage: this.state.src,
70 |           backgroundSize: backgroundSize,
71 |           backgroundPosition: backgroundPosition,
72 |           backgroundRepeat: backgroundRepeat,
73 |           transition: `opacity ${this.props.duration || '300ms'} ${this.props.ease || 'cubic-bezier(0.215, 0.61, 0.355, 1)'}`,
74 |           opacity: this.state.loaded ? 1 : 0
75 |         }}></div>
76 |         {this.props.children}
77 |       </div>
78 |     );
79 |   }
80 | }
81 | 
82 | export default PreloadImage;
83 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ⚡ React Preload Image
 2 | 
 3 | Preload and fade in an image from a background color or placeholder image.
 4 | 
 5 | Optional support for lazy loading so images load when scrolled into view. Uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and falls back to simply preloading when there isn't browser support (cough, IE, cough).
 6 | 
 7 | [View the demo on CodePen](https://codepen.io/stothelios/full/gzoZLZ/)
 8 | 
 9 | ## Usage
10 | 
11 | Install with `yarn add react-preload-image` or `npm install react-preload-image`
12 | 
13 | Import in your components with `import PreloadImage from 'react-preload-image'`
14 | 
15 | ### Component styles
16 | 
17 | These can be applied using a class or inline (examples of each method below).
18 | 
19 | - **Required:** Relative, absolute, or fixed position
20 | - **Required:** Width & height (explicitly or via top/right/bottom/left)
21 | - **Optional:** Background color or placeholder image (what will be shown before the image loads)
22 | 
23 | ### Component props
24 | 
25 | | Prop | Type | Required | Default | Description |
26 | | :--- | :--- | :--- | :--- | :--- |
27 | | src | String | Yes | | The image source |
28 | | lazy | Boolean | No | | Enables lazy loading |
29 | | duration | String | No | `300ms` | Duration of the fade-in transition |
30 | | ease | String | No | `cubic-bezier(0.215, 0.61, 0.355, 1)` | Ease of the fade-in transition |
31 | | innerStyle | Object | No | | Specify the CSS values for `backgroundSize`, `backgroundPosition`, and `backgroundRepeat` |
32 | 
33 | ## Examples
34 | 
35 | Styles can be applied using a class:
36 | 
37 | ```css
38 | .someClass {
39 |   position: relative;
40 |   width: 100%;
41 |   height: 200px;
42 |   background-color: #222222;
43 | }
44 | ```
45 | 
46 | ```jsx
47 | <PreloadImage
48 |   className="someClass"
49 |   src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Ailurus_fulgens_-_Syracuse_Zoo.jpg"
50 |   lazy
51 | />
52 | ```
53 | 
54 | Or inline:
55 | 
56 | ```jsx
57 | <PreloadImage
58 |   style={{
59 |     position: 'absolute',
60 |     top: 0,
61 |     right: 0,
62 |     bottom: 0,
63 |     left: 0,
64 |     backgroundColor: '#222222'
65 |   }}
66 |   src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Ailurus_fulgens_-_Syracuse_Zoo.jpg"
67 | />
68 | ```
69 | 
70 | ## Credits
71 | 
72 | Built using [NWB](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb)
73 | 
74 | ## Contributing
75 | 
76 | To test using the included demo app:
77 | 
78 | 1. Clone the repo
79 | 2. Open the directory and run `npm install` and `npm start`
80 | 3. The demo app will update to reflect any changes to it or the component
81 | 
82 | To test in your own local app:
83 | 
84 | 1. Clone the repo
85 | 2. Open the directory and run `npm install` and `npm link`
86 | 3. Open a directory with a test project and run `npm link [package name]`
87 | 4. Back in the react-preload-image directory run `npm run build`
88 | 


--------------------------------------------------------------------------------