return opacity: 1 if server rendered, fixes #4

Author: zackify

lib/image.js

@@ -31,7 +31,7 @@ var Image = function (_React$Component) {
     var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Image).call(this));
 
     var opacity = 0;
-    if (!src.match(/http/)) opacity = 1;
+    if (!src.match(/http/) || typeof window === 'undefined') opacity = 1;
 
     _this.state = { opacity: opacity };
     return _this;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "legit-image",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "an img tag, with built in lazy loading",
   "main": "lib/image.js",
   "scripts": {

src/image.js

@@ -5,7 +5,7 @@ export default class Image extends React.Component {
   constructor({ src }){
     super()
     let opacity = 0
-    if(!src.match(/http/)) opacity = 1
+    if(!src.match(/http/) || typeof window === 'undefined') opacity = 1
 
     this.state = { opacity }
   }

tests/image.js

@@ -5,10 +5,17 @@ import Image from '../src/image'
 
 describe('Image', () => {
   it('renders with opacity: 0', () => {
+    global.window = {}
     const wrapper = shallow(<Image src="http://google.com" />)
     expect(wrapper.props().style.opacity).to.equal(0)
   })
 
+  it('renders with opacity: 1 on server', () => {
+    global.window = undefined
+    const wrapper = shallow(<Image src="http://google.com" />)
+    expect(wrapper.props().style.opacity).to.equal(1)
+  })
+
   it('changes opacity on state change', () => {
     const wrapper = shallow(<Image src="http://google.com" />)
     wrapper.setState({ opacity: 1 })