Move to TypeScript

.eslintrc.js

@@ -1,45 +1,12 @@
 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'],
-  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: '999.999.999',
     },
   },
-  overrides: [
-    {
-      files: ['**/*.test.js'],
-      env: { jest: true },
-    },
-  ],
 }

.prettierrc

@@ -1,5 +1,4 @@
 {
   "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5"
+  "singleQuote": true
 }

README.md

@@ -53,6 +53,12 @@ export default App
 
 This is the provider component. It should be placed above any component using `useViewport()`.
 
+Apart from `children` it accepts the following props:
+
+##### throttle
+
+The interval in ms for window updates. Defaults to `100`.
+
 ### useViewport()
 
 This is the hook to be used throughout the app.
@@ -62,6 +68,6 @@ It takes no parameters and returns the following:
 - `width`: The current screen width.
 - `height`: The current screen height.
 - `within(min, max)`: A function that returns `true` if the viewport width is between `min` and `max`. `min` and `max` can be any number, or one of the available breakpoints. If -1 is passed as min or max, there will be no minimum or maximum.
-- `above(x)`: Returns `true` if the viewport width is above `x`, `false` otherwise. 
-- `below(x)`: Returns `true` if the viewport width is below `x`, `false` otherwise. 
-- `breakpoints`: An object that contains the number values of the different recommended breakpoints. It can be useful to set these values in CSS, for example. 
+- `above(x)`: Returns `true` if the viewport width is above `x`, `false` otherwise.
+- `below(x)`: Returns `true` if the viewport width is below `x`, `false` otherwise.
+- `breakpoints`: An object that contains the number values of the different recommended breakpoints. It can be useful to set these values in CSS, for example.

examples/nodejs/index.js

@@ -4,7 +4,7 @@ const { useViewport } = require('use-viewport')
 
 console.log(
   ReactDOMServer.renderToStaticMarkup(
-    React.createElement(function() {
+    React.createElement(function () {
       const viewport = useViewport()
       return React.createElement(
         'p',

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"

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>

examples/simple-viewport/index.js → examples/simple-viewport/index.tsx

@@ -1,11 +1,38 @@
-import 'babel-polyfill'
-import React from 'react'
+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)
+  const [mounted, setMounted] = useState(true)
+
+  return (
+    <>
+      <div>
+        {mounted && (
+          <ViewportProvider throttle={throttleAmount}>
+            <Content />
+          </ViewportProvider>
+        )}
 
+        <label style={{ marginTop: '20px' }}>
+          Throttle(ms){' '}
+          <input
+            value={throttleAmount}
+            onChange={(event) => setThrottleAmount(Number(event.target.value))}
+          />
+        </label>
+        <br />
+        <button onClick={() => setMounted(!mounted)}>
+          {mounted ? 'Unmount' : 'Mount'} provider
+        </button>
+      </div>
+    </>
+  )
+}
+
+function Content() {
+  const { width, height, within, below, above } = useViewport()
   return (
     <div>
       {below('medium') && <div>small</div>}
@@ -19,7 +46,7 @@ function App() {
 }
 
 ReactDOM.render(
-  <ViewportProvider>
+  <>
     <App />
     <style>
       {`
@@ -39,6 +66,6 @@ ReactDOM.render(
         }
       `}
     </style>
-  </ViewportProvider>,
-  document.querySelector('#app')
+  </>,
+  document.getElementById('root')
 )

examples/simple-viewport/package.json

@@ -1,16 +1,17 @@
 {
   "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-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"
   }
 }

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
+  }
+}