feat: [BREAKING CHANGE] - support react 16.8.0+

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["react-app"]
+  "presets": ["@babel/preset-react", "@babel/preset-env"]
 }

.eslintrc

@@ -1,8 +1,8 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "extends": [
     "airbnb",
-    "prettier/react",
+    "plugin:react/recommended",
     "plugin:prettier/recommended"
   ],
   "env": {
@@ -12,5 +12,16 @@
     "node": true,
     "browser": true,
     "jest": true
+  },
+  "rules": {
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/setupTests.js" // jest setup
+        ],
+        "optionalDependencies": false
+      }
+    ]
   }
 }

.gitignore

@@ -2,3 +2,5 @@ node_modules
 *.log
 .idea
 dist
+
+*storybook.log

.scripts/prepublish.sh

@@ -9,7 +9,7 @@
 echo "=> Transpiling 'src' into ES5 ..."
 echo ""
 rm -rf ./dist
-NODE_ENV=production ./node_modules/.bin/babel --ignore tests,stories --plugins "transform-runtime" ./src --out-dir ./dist
+NODE_ENV=production ./node_modules/.bin/babel --ignore tests,stories --plugins "@babel/transform-runtime" ./src --out-dir ./dist
 echo ""
 echo "=> Transpiling completed."
 

.storybook/main.js

@@ -0,0 +1,15 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -30,12 +30,44 @@ npm install --save react-lottie-wrapper
 ```
 
 ## Usage
+A react functional component example (React 16.8.0+).
 
-Import pinjump.json.json as animation data
+```jsx
+import { useState } from "react";
+import { Lottie } from "react-lottie-wrapper";
+import * as animationData from "./pinjump.json";
+
+const LottieControl = () => {
+  const [isStopped, setIsStopped] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+
+  const defaultOptions = {
+    loop: true,
+    autoplay: true, 
+    animationData: animationData.default,
+    rendererSettings: {
+      preserveAspectRatio: "xMidYMid slice"
+    }
+  };
+
+  return (
+    <Lottie 
+      options={defaultOptions}
+      height={400}
+      width={400}
+      isStopped={isStopped}
+      isPaused={isPaused}
+    />
+  )
+}
+```
+A class based example of implementation. Import pinjump.json.json as animation data.
+
+NOTE: We will be deprecating this in future versions. It is advised that you use the functional version provided. You can see an example of the implementation above. 
 
 ```jsx
 import React, { Component } from "react"
-import Lottie from "react-lottie-wrapper";
+import { ReactLottie } from "react-lottie-wrapper";
 import * as animationData from "./pinjump.json"
 
 export default class LottieControl extends Component {
@@ -105,13 +137,10 @@ export default class LottieControl extends Component {
     )
   }
 }
-
 ```
 
 ### props
-The `<Lottie />` Component supports the following properties:
-
-
+The `<Lottie /> and <ReactLottie />` Components supports the following properties:
 
 **options** *required*