aragon · andy-hook · Oct 6, 2020 · Sep 28, 2020 · Sep 28, 2020 · Sep 28, 2020
diff --git a/.babelrc.json b/.babelrc.json
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,45 +1,18 @@
 module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-  },
   extends: [
-    'standard',
-    'standard-react',
-    'prettier/react',
+    'react-app',
+    'prettier/@typescript-eslint',
     'plugin:prettier/recommended',
   ],
-  parser: 'babel-eslint',
-  parserOptions: {
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-      jsx: true,
-    },
-    sourceType: 'module',
-  },
-  plugins: ['prettier', 'react', 'react-hooks'],
+  plugins: ['react-hooks'],
   rules: {
-    'react/prop-types': 'warn',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
-    'import/no-unresolved': [
-      'error',
-      { ignore: ['^react(-dom)?$', '^styled-components$'] },
-    ],
-    'promise/no-nesting': ['off'],
-    'linebreak-style': ['error', 'unix'],
-    curly: 'error',
   },
   settings: {
     react: {
       pragma: 'React',
-      version: '16.6',
+      version: 'detect',
     },
   },
-  overrides: [
-    {
-      files: ['**/*.test.js'],
-      env: { jest: true },
-    },
-  ],
 }
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,4 @@
 {
   "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5"
+  "singleQuote": true
 }
diff --git a/examples/nodejs/yarn.lock b/examples/nodejs/yarn.lock
@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+lodash-es@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
 
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
@@ -24,7 +24,7 @@ object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -66,7 +66,6 @@ scheduler@^0.19.1:
     object-assign "^4.1.1"
 
 "use-viewport@file:../..":
-  version "0.1.0"
+  version "0.2.0"
   dependencies:
-    lodash.throttle "^4.1.1"
-    prop-types "^15.7.2"
+    lodash-es "^4.17.15"
diff --git a/examples/simple-viewport/.babelrc b/examples/simple-viewport/.babelrc
diff --git a/examples/simple-viewport/index.html b/examples/simple-viewport/index.html
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Simple Viewport</title>
   </head>
-  <body>
-    <div id="app"></div>
-    <script src="./index.js"></script>
+
+  <body style="margin: 0;">
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
   </body>
 </html>
diff --git a/examples/simple-viewport/index.js → examples/simple-viewport/index.tsx b/examples/simple-viewport/index.js → examples/simple-viewport/index.tsx
@@ -1,11 +1,29 @@
-import 'babel-polyfill'
-import React from 'react'
+import 'react-app-polyfill/ie11'
+import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
 import { ViewportProvider, useViewport } from 'use-viewport'
 
 function App() {
-  const { width, height, within, below, above } = useViewport()
+  const [throttleAmount, setThrottleAmount] = useState(100)
+
+  return (
+    <ViewportProvider throttle={throttleAmount}>
+      <div>
+        <Content />
+        <label style={{ marginTop: '20px' }}>
+          Throttle{' '}
+          <input
+            value={throttleAmount}
+            onChange={event => setThrottleAmount(Number(event.target.value))}
+          />
+        </label>
+      </div>
+    </ViewportProvider>
+  )
+}
 
+function Content() {
+  const { width, height, within, below, above } = useViewport()
   return (
     <div>
       {below('medium') && <div>small</div>}
@@ -19,7 +37,7 @@ function App() {
 }
 
 ReactDOM.render(
-  <ViewportProvider>
+  <>
     <App />
     <style>
       {`
@@ -39,6 +57,6 @@ ReactDOM.render(
         }
       `}
     </style>
-  </ViewportProvider>,
-  document.querySelector('#app')
+  </>,
+  document.getElementById('root')
 )
diff --git a/examples/simple-viewport/package.json b/examples/simple-viewport/package.json
@@ -1,16 +1,18 @@
 {
   "scripts": {
-    "start": "parcel serve index.html",
+    "start": "parcel index.html",
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "babel-polyfill": "^6.26.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.13.1",
+    "react-app-polyfill": "^1.0.6",
+    "react-dom": "^16.13.1",
     "use-viewport": "link:../.."
   },
   "devDependencies": {
-    "@babel/core": "^7.8.3",
-    "parcel": "^1.12.4"
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "parcel": "^1.12.3",
+    "typescript": "^3.4.5"
   }
 }
diff --git a/examples/simple-viewport/tsconfig.json b/examples/simple-viewport/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "removeComments": true,
+    "strictNullChecks": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "lib": ["es2015", "es2016", "dom"],
+    "types": ["node"],
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}