Aljullu · Aljullu · Dec 24, 2019 · Dec 24, 2019
diff --git a/.eslintrc b/.eslintrc
@@ -92,7 +92,7 @@
     "func-style": 0,
     "id-length": 0,
     "id-match": 1,
-    "indent": [1, 2, { "SwitchCase": 1 }],
+    "indent": [1, "tab", { "SwitchCase": 1 }],
     "jsx-quotes": 1,
     "key-spacing": 1,
     "line-comment-position": 0,
@@ -129,10 +129,16 @@
     "one-var-declaration-per-line": 0,
     "one-var": 0,
     "operator-assignment": 1,
-    "operator-linebreak": [1, "after"],
+    "operator-linebreak": [1, "after",
+      {
+        "overrides": {
+          "?": "before",
+          ":": "before"
+        }
+      }],
     "padded-blocks": [1, "never"],
     "quote-props": [1, "as-needed"],
-    "quotes": [1, 'single'],
+    "quotes": [1, "single", { "avoidEscape": true }],
     "require-jsdoc": 0,
     "semi-spacing": 1,
     "semi": 1,

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,12 @@
+printWidth: 80
+tabWidth: 4
+useTabs: true
+semi: true
+singleQuote: true
+quoteProps: "as-needed"
+jsxSingleQuote: false
+trailingComma: es5
+jsxBracketSameLine: false
+bracketSpacing: true
+arrowParens: avoid
+endOfLine: "lf"
diff --git a/package.json b/package.json
@@ -1,68 +1,77 @@
 {
-  "name": "react-lazy-load-image-component",
-  "version": "1.4.0-beta.1",
-  "description": " React Component to lazy load images using a HOC to track window scroll position. ",
-  "main": "build/index.js",
-  "peerDependencies": {
-    "react": "^15.x.x || ^16.x.x",
-    "react-dom": "^15.x.x || ^16.x.x"
-  },
-  "dependencies": {
-    "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1"
-  },
-  "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.1",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "css-loader": "^0.28.10",
-    "enzyme": "^3.4.4",
-    "enzyme-adapter-react-16": "^1.2.0",
-    "eslint": "^4.18.2",
-    "eslint-loader": "^2.0.0",
-    "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-react": "^7.11.1",
-    "jest": "^23.5.0",
-    "path": "^0.12.7",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "style-loader": "^0.20.3",
-    "webpack": "^4.17.1",
-    "webpack-cli": "^3.1.2"
-  },
-  "scripts": {
-    "test": "jest",
-    "start": "webpack --watch",
-    "build": "webpack"
-  },
-  "jest": {
-    "verbose": true,
-    "testURL": "http://localhost/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Aljullu/react-lazy-load-image-component.git"
-  },
-  "keywords": [
-    "react",
-    "react-component",
-    "lazyload",
-    "lazyloading",
-    "lazy-loading",
-    "lazyload-images"
-  ],
-  "author": {
-    "name": "Albert Juhé Lluveras",
-    "email": "contact@albertjuhe.com"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Aljullu/react-lazy-load-image-component/issues"
-  },
-  "homepage": "https://github.com/Aljullu/react-lazy-load-image-component#readme"
+	"name": "react-lazy-load-image-component",
+	"version": "1.4.0-beta.1",
+	"description": " React Component to lazy load images using a HOC to track window scroll position. ",
+	"main": "build/index.js",
+	"peerDependencies": {
+		"react": "^15.x.x || ^16.x.x",
+		"react-dom": "^15.x.x || ^16.x.x"
+	},
+	"dependencies": {
+		"lodash.debounce": "^4.0.8",
+		"lodash.throttle": "^4.1.1"
+	},
+	"devDependencies": {
+		"babel-cli": "^6.24.1",
+		"babel-core": "^6.26.0",
+		"babel-eslint": "^8.2.2",
+		"babel-jest": "^22.4.1",
+		"babel-loader": "^7.1.4",
+		"babel-plugin-transform-object-rest-spread": "^6.26.0",
+		"babel-preset-env": "^1.6.1",
+		"babel-preset-react": "^6.24.1",
+		"css-loader": "^0.28.10",
+		"enzyme": "^3.4.4",
+		"enzyme-adapter-react-16": "^1.2.0",
+		"eslint": "^4.18.2",
+		"eslint-loader": "^2.0.0",
+		"eslint-plugin-babel": "^4.1.2",
+		"eslint-plugin-react": "^7.11.1",
+		"husky": "^3.1.0",
+		"jest": "^23.5.0",
+		"path": "^0.12.7",
+		"prettier": "^1.19.1",
+		"react": "^16.2.0",
+		"react-dom": "^16.2.0",
+		"style-loader": "^0.20.3",
+		"webpack": "^4.17.1",
+		"webpack-cli": "^3.1.2"
+	},
+	"scripts": {
+		"test": "jest",
+		"start": "webpack --watch",
+		"build": "webpack",
+		"prettier": "prettier --write \"**/*.{js,jsx,json}\"",
+		"lint": "eslint src --ext=js,jsx"
+	},
+	"jest": {
+		"verbose": true,
+		"testURL": "http://localhost/"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Aljullu/react-lazy-load-image-component.git"
+	},
+	"keywords": [
+		"react",
+		"react-component",
+		"lazyload",
+		"lazyloading",
+		"lazy-loading",
+		"lazyload-images"
+	],
+	"author": {
+		"name": "Albert Juhé Lluveras",
+		"email": "contact@albertjuhe.com"
+	},
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/Aljullu/react-lazy-load-image-component/issues"
+	},
+	"homepage": "https://github.com/Aljullu/react-lazy-load-image-component#readme",
+	"husky": {
+		"hooks": {
+			"pre-commit": "npm run prettier && npm run lint"
+		}
+	}
 }
diff --git a/src/components/LazyLoadComponent.jsx b/src/components/LazyLoadComponent.jsx
@@ -6,94 +6,114 @@ import PlaceholderWithTracking from './PlaceholderWithTracking.jsx';
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
 
 class LazyLoadComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const { afterLoad, beforeLoad, scrollPosition, visibleByDefault } = props;
-
-    this.state = {
-      visible: visibleByDefault,
-    };
-
-    if (visibleByDefault) {
-      beforeLoad();
-      afterLoad();
-    }
-
-    this.onVisible = this.onVisible.bind(this);
-
-    this.isScrollTracked = Boolean(scrollPosition &&
-      Number.isFinite(scrollPosition.x) && scrollPosition.x >= 0 &&
-      Number.isFinite(scrollPosition.y) && scrollPosition.y >= 0);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.visible !== this.state.visible) {
-      this.props.afterLoad();
-    }
-  }
-
-  onVisible() {
-    this.props.beforeLoad();
-    this.setState({
-      visible: true,
-    });
-  }
-
-  render() {
-    if (this.state.visible) {
-      return this.props.children;
-    }
-
-    const { className, delayMethod, delayTime, height,
-      placeholder, scrollPosition, style, threshold,
-      useIntersectionObserver, width } = this.props;
-
-    if (
-      this.isScrollTracked ||
-      (useIntersectionObserver && isIntersectionObserverAvailable())
-    ) {
-      return (
-        <PlaceholderWithoutTracking
-          className={className}
-          height={height}
-          onVisible={this.onVisible}
-          placeholder={placeholder}
-          scrollPosition={scrollPosition}
-          style={style}
-          threshold={threshold}
-          useIntersectionObserver={useIntersectionObserver}
-          width={width} />
-      );
-    }
-
-    return (
-      <PlaceholderWithTracking
-        className={className}
-        delayMethod={delayMethod}
-        delayTime={delayTime}
-        height={height}
-        onVisible={this.onVisible}
-        placeholder={placeholder}
-        style={style}
-        threshold={threshold}
-        width={width} />
-    );
-  }
+	constructor(props) {
+		super(props);
+
+		const {
+			afterLoad,
+			beforeLoad,
+			scrollPosition,
+			visibleByDefault,
+		} = props;
+
+		this.state = {
+			visible: visibleByDefault,
+		};
+
+		if (visibleByDefault) {
+			beforeLoad();
+			afterLoad();
+		}
+
+		this.onVisible = this.onVisible.bind(this);
+
+		this.isScrollTracked = Boolean(
+			scrollPosition &&
+				Number.isFinite(scrollPosition.x) &&
+				scrollPosition.x >= 0 &&
+				Number.isFinite(scrollPosition.y) &&
+				scrollPosition.y >= 0
+		);
+	}
+
+	componentDidUpdate(prevProps, prevState) {
+		if (prevState.visible !== this.state.visible) {
+			this.props.afterLoad();
+		}
+	}
+
+	onVisible() {
+		this.props.beforeLoad();
+		this.setState({
+			visible: true,
+		});
+	}
+
+	render() {
+		if (this.state.visible) {
+			return this.props.children;
+		}
+
+		const {
+			className,
+			delayMethod,
+			delayTime,
+			height,
+			placeholder,
+			scrollPosition,
+			style,
+			threshold,
+			useIntersectionObserver,
+			width,
+		} = this.props;
+
+		if (
+			this.isScrollTracked ||
+			(useIntersectionObserver && isIntersectionObserverAvailable())
+		) {
+			return (
+				<PlaceholderWithoutTracking
+					className={className}
+					height={height}
+					onVisible={this.onVisible}
+					placeholder={placeholder}
+					scrollPosition={scrollPosition}
+					style={style}
+					threshold={threshold}
+					useIntersectionObserver={useIntersectionObserver}
+					width={width}
+				/>
+			);
+		}
+
+		return (
+			<PlaceholderWithTracking
+				className={className}
+				delayMethod={delayMethod}
+				delayTime={delayTime}
+				height={height}
+				onVisible={this.onVisible}
+				placeholder={placeholder}
+				style={style}
+				threshold={threshold}
+				width={width}
+			/>
+		);
+	}
 }
 
 LazyLoadComponent.propTypes = {
-  afterLoad: PropTypes.func,
-  beforeLoad: PropTypes.func,
-  useIntersectionObserver: PropTypes.bool,
-  visibleByDefault: PropTypes.bool,
+	afterLoad: PropTypes.func,
+	beforeLoad: PropTypes.func,
+	useIntersectionObserver: PropTypes.bool,
+	visibleByDefault: PropTypes.bool,
 };
 
 LazyLoadComponent.defaultProps = {
-  afterLoad: () => ({}),
-  beforeLoad: () => ({}),
-  useIntersectionObserver: true,
-  visibleByDefault: false,
+	afterLoad: () => ({}),
+	beforeLoad: () => ({}),
+	useIntersectionObserver: true,
+	visibleByDefault: false,
 };
 
 export default LazyLoadComponent;