Merge pull request #1 from vadymshymko/develop

v2.0.0

.browserslistrc

@@ -0,0 +1 @@
+>0.25%, not ie 11

.eslintignore

@@ -1,2 +1 @@
 dist/*
-example/*

.eslintrc.json

@@ -9,8 +9,7 @@
   "plugins": [
     "react",
     "jsx-a11y",
-    "import",
-    "jest"
+    "import"
   ],
   "rules": {
     "import/no-extraneous-dependencies": [
@@ -21,6 +20,10 @@
     ]
   },
   "settings": {
-    "import/resolver": "webpack"
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack.config.js"
+      }
+    }
   }
-}
+}

.gitignore

@@ -59,3 +59,6 @@ typings/
 
 # next.js build output
 .next
+
+dist/
+example/

README.md

@@ -1,2 +1,66 @@
 # react-lazilyload-img
-React.js component for lazy load your images
+
+[![npm version](https://img.shields.io/npm/v/react-lazilyload-img.svg?style=flat)](https://www.npmjs.com/package/react-lazilyload-img)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-lazilyload-img?label=size)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/vadymshymko/react-lazilyload-img/blob/master/LICENSE)
+
+Simple && small React.js component for lazy load images
+
+## Table of contents
+- [Installation](#installation)
+- [Usage](#usage)
+- [Props](#props)
+- [Demo](#demo)
+
+## Installation
+
+**npm**
+
+```bash
+npm install react-lazilyload-img --save
+```
+
+**yarn**
+
+```bash
+yarn add react-lazilyload-img
+```
+
+## Usage
+
+#### Basic Example:
+
+```js
+import React, { Component } from 'react';
+import Img from 'react-lazilyload-img';
+
+const App = () => {
+  return(
+    <Img
+      src="//images.unsplash.com/photo-1539250632877-c12b7d5d6fcb"
+      placeholderSrc="//images.unsplash.com/photo-1539250632877-c12b7d5d6fcb?w=27&q=8"
+    >
+  );
+};
+```
+
+## Props
+
+Name | Type | Default Value | Description   
+---- | ---- | ------------- | --------------
+className | string | `''` | image className
+loadingClassName | string | `''` | className for main image in loading state (applied when main image start loading and delete after loading end)
+mainImgClassName | string | `''` | className for main image (applied when main image start loading)
+mainImgOnLoad | func | `null` | function that will be called after main image load end
+onLoad | func | `null` | function that will be called after placeholder image or main image load end
+placeholderClassName | string | `''` | placeholder image className (deleted before main image start loading)
+placeholderOnLoad | func | `null` | function that will be called after placeholder image load end
+placeholderSrc | string | `''` | placeholder image src attr value
+placeholderSrcSet | string | `''` | placeholder image srcset attr value
+src | string | `''` | main image src attr value
+srcSet | string | `''` | main image srcset attr value
+... | | | any other image attributes
+
+## Demo
+
+[![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-lazilyload-img-69wd6)

babel.config.js

@@ -4,30 +4,29 @@ module.exports = {
     '@babel/preset-env',
   ],
   plugins: [
-    // Stage 0
-    '@babel/plugin-proposal-function-bind',
-
-    // Stage 1
+    '@babel/plugin-transform-runtime',
     '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-proposal-logical-assignment-operators',
-    ['@babel/plugin-proposal-optional-chaining', { loose: false }],
-    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
-    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
-    '@babel/plugin-proposal-do-expressions',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
 
-    // Stage 2
-    ['@babel/plugin-proposal-decorators', { legacy: true }],
-    '@babel/plugin-proposal-function-sent',
-    '@babel/plugin-proposal-export-namespace-from',
-    '@babel/plugin-proposal-numeric-separator',
-    '@babel/plugin-proposal-throw-expressions',
+    'transform-inline-consecutive-adds',
+    'minify-constant-folding',
+    'minify-dead-code-elimination',
+    'minify-guarded-expressions',
+    'minify-numeric-literals',
+    'minify-type-constructors',
 
-    // Stage 3
-    '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-syntax-import-meta',
-    ['@babel/plugin-proposal-class-properties', { loose: false }],
-    '@babel/plugin-proposal-json-strings',
+    [
+      'transform-react-remove-prop-types',
+      {
+        removeImport: true,
+        classNameMatchers: ['Component', 'PureComponent'],
+        additionalLibraries: ['prop-types'],
+      },
+    ],
 
-    '@babel/plugin-transform-runtime',
+    ['@babel/plugin-transform-react-constant-elements'],
+    ['@babel/plugin-transform-react-inline-elements'],
+    ['transform-remove-console', { exclude: ['error', 'warn'] }],
+    ['babel-plugin-loop-optimizer'],
   ],
 };