feat: 2.0.0

.babelrc

@@ -1,15 +1,19 @@
 {
-    "presets": [
-        ["@babel/preset-env", {
-            "loose": true,
-            "modules": false,
-            "targets": "> 0.25%, not dead"
-        }],
-        "@babel/preset-react"
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "modules": false,
+        "targets": "> 0.25%, not dead"
+      }
     ],
-    "plugins": [
-        "@babel/plugin-transform-runtime",
-        "@babel/plugin-proposal-class-properties"
-    ]
-  }
-
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-proposal-class-properties"
+  ],
+  "ignore": ["node_modules/**"]
+}

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

.eslintignore

@@ -1,2 +1,5 @@
 node_modules/* 
 dist/*
+example/index.js
+webpack.config.js
+rollup.config.js

.eslintrc

@@ -1,30 +1,19 @@
 {
-    "extends": ["airbnb"],
-    "parser": "babel-eslint",
-    "plugins": [
-        "react",
-        "jsx-a11y",
-        "import"
-    ],
-    "env": {
-        "browser": true
-    },
-    "rules": {
-        "indent": ["error", 4],
-        "quotes": ["error", "double"],
-        "max-len": ["error", 350],
-        "no-unused-vars": ["warn", { "args": "none" }],
-        "class-methods-use-this": "off",
-        "jsx-a11y/href-no-hash": "off",
-        "jsx-a11y/label-has-associated-control": "off",
-        "camelcase": "error",
-        "no-return-assign": "off",
-        "no-noninteractive-element-to-interactive-role": "off",
-        "no-console": ["error", { "allow": ["log", "error", "warn"] }],
-        "react/jsx-indent" : ["error", 4],
-        "react/jsx-indent-props" : ["error", 4],
-        "import/no-extraneous-dependencies": "off",
-        "import/prefer-default-export": "off",
-        "react/destructuring-assignment": "off"
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "prettier/prettier": "error"
+  },
+  "env": {
+    "browser": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect" // https://github.com/yannickcr/eslint-plugin-react#configuration
     }
+  }
 }

.npmignore

@@ -2,8 +2,13 @@
 .vscode
 .git*
 
+src
 example
 node_modules
 npm-debug.log
 yarn-debug.log
-yarn-error.log
+yarn-error.log
+demo.gif
+rollup.config.js
+webpack.config.js
+tsconfig.json

.prettierignore

@@ -0,0 +1,7 @@
+dist
+src
+example
+webpack.config.js
+*.json
+*.md
+.babelrc

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "useTabs": false,
+  "semi": true,
+  "requirePragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "ignore",
+  "endOfLine": "auto",
+  "trailingComma": "none"
+}

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+2.0.0 (November 15, 2020)
+- development by typescript
+- migration functional component
+
 1.0.4 (June 22, 2020)
 - add 'onClick' props. 
   - can handle callback when image was clicked 

README.md

@@ -10,7 +10,7 @@
 [license-image]: https://img.shields.io/badge/license-MIT-blue.svg
 [license-url]: https://github.com/kimcoder/react-simple-image-slider/blob/master/LICENSE
 
-Simple ImageSlider Component for ReactJS v16.0<br>
+Simple ImageSlider Component for ReactJS v16.13<br>
 - Just Two Elements will be used. (for display images)
 - Support GPU Render, by default. 
 - Support Image Preload.
@@ -103,7 +103,7 @@ npm run build:watch     // build watch mode
 // yarn
 yarn example
 yarn build
-yarn buidl:watch
+yarn build:watch
 ```
 If you want to run a test app, should build before do that.<br>
 

example/App.jsx

@@ -15,7 +15,6 @@ import SimpleImageSlider from "..";
 
 class App extends React.Component {
     listSubHeader = <ListSubheader><h1>Slider Settings</h1></ListSubheader>;
-
     toggleOptions = ["useGPURender", "showNavs", "showBullets"];
 
     images = [