Rewritten in TypeScript

.babelrc

@@ -1,4 +1,7 @@
 {
-  "presets": ["env", "react"],
-  "plugins": ["transform-class-properties", "transform-object-rest-spread"]
-}
+  "presets": ["@babel/env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+}

package.json

@@ -10,7 +10,8 @@
   ],
   "license": "MIT",
   "main": "dist/index.js",
-  "source": "src/index.js",
+  "typings": "dist/index.d.ts",
+  "source": "src/index.tsx",
   "files": [
     "dist",
     "Audio.js",
@@ -19,8 +20,8 @@
     "Script.js"
   ],
   "scripts": {
-    "start": "NODE_ENV=development babel -w ./src --out-dir dist",
-    "build": "rimraf dist && NODE_ENV=production babel ./src --out-dir dist",
+    "start": "NODE_ENV=development babel -w ./src --extensions \".ts,.tsx\" --out-dir dist",
+    "build": "rimraf dist && NODE_ENV=production babel ./src --extensions \".ts,.tsx\" --out-dir dist && tsc",
     "format": "prettier --trailing-comma es5 --single-quote --write 'src/**/*' 'exampe/src/**/*' 'example/README.md' 'README.md'",
     "test": "echo yolo",
     "prepare": "npm run build",
@@ -33,21 +34,28 @@
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-runtime": "^6.26.0",
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.1.0",
+    "@babel/runtime": "^7.1.2",
+    "@types/lodash": "^4.14.117",
+    "@types/react": "^16.4.18",
     "doctoc": "^1.3.1",
     "husky": "^0.14.3",
     "lint-staged": "^7.2.2",
     "np": "^3.0.4",
     "prettier": "^1.14.3",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
-    "rimraf": "^2.6.2"
+    "rimraf": "^2.6.2",
+    "tsconfig-palmerhq": "^1.0.2",
+    "tslint-config-palmerhq": "^1.0.2",
+    "typescript": "^3.1.3"
   },
   "lint-staged": {
     "**/*.{js,jsx}": [

src/Audio.js → src/Audio.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import { createResource } from './createResource';
 import { isBrowser } from './utils';
 
-export const AudioResource = createResource(src => {
+export const AudioResource = createResource((src: string) => {
   return new Promise((resolve, reject) => {
-    const audio = new Audio(src);
+    const audio = document.createElement('audio');
+    audio.src = src;
     audio.onloadeddata = () => resolve(audio);
     audio.onerror = reject;
     document.body.appendChild(audio);
-  });
+  }) as Promise<HTMLAudioElement>;
 });
 
-export const Audio = props => {
+export const Audio: React.SFC<
+  React.DetailedHTMLProps<
+    React.AudioHTMLAttributes<HTMLAudioElement>,
+    HTMLAudioElement
+  >
+> = props => {
   if (isBrowser) {
     AudioResource.read(props.src);
   }

src/Img.js → src/Img.tsx

@@ -2,16 +2,21 @@ import React from 'react';
 import { createResource } from './createResource';
 import { isBrowser } from './utils';
 
-export const ImgResource = createResource(src => {
+export const ImgResource = createResource((src: string) => {
   return new Promise((resolve, reject) => {
     const image = new Image();
     image.src = src;
     image.onload = resolve;
     image.onerror = reject;
-  });
+  }) as Promise<Event>;
 });
 
-export const Img = props => {
+export const Img: React.SFC<
+  React.DetailedHTMLProps<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  >
+> = props => {
   if (isBrowser) {
     ImgResource.read(props.src);
   }

src/Preload.js → src/Preload.tsx

@@ -1,13 +1,18 @@
-import React from 'react';
 import { createResource } from './createResource';
 import { isBrowser } from './utils';
 
+type PreloadProps = {
+  href: string;
+  as: string;
+  media?: string;
+};
+
 export const PreloadResource = createResource(
   load,
   ({ href, as }) => `${href}.${as}`
 );
 
-function load({ href, as, media = 'all' }) {
+function load({ href, as, media = 'all' }: PreloadProps) {
   return new Promise((resolve, reject) => {
     const link = document.createElement('link');
     link.rel = 'preload';
@@ -20,7 +25,7 @@ function load({ href, as, media = 'all' }) {
   });
 }
 
-export const Preload = ({ children, ...rest }) => {
+export const Preload: React.SFC<PreloadProps> = ({ children, ...rest }) => {
   if (isBrowser) {
     PreloadResource.read(rest);
   }

src/Script.js → src/Script.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
 import { createResource } from './createResource';
 import { isBrowser } from './utils';
 
-export const ScriptResource = createResource(({ src }) => {
+type ScriptProps = {
+  src: string;
+};
+export const ScriptResource = createResource(({ src }: ScriptProps) => {
   const script = document.createElement('script');
   script.src = src;
 
@@ -15,7 +17,7 @@ export const ScriptResource = createResource(({ src }) => {
   });
 });
 
-export const Script = ({ children, ...rest }) => {
+export const Script: React.SFC<ScriptProps> = ({ children, ...rest }) => {
   if (isBrowser) {
     ScriptResource.read({ src: rest.src });
   }
@@ -27,6 +29,6 @@ export const Script = ({ children, ...rest }) => {
   return children;
 };
 
-export function useScript({ src }) {
+export function useScript({ src }: ScriptProps) {
   return ScriptResource.read({ src });
 }

src/Stylesheet.js → src/Stylesheet.tsx

@@ -2,12 +2,17 @@ import React from 'react';
 import { createResource } from './createResource';
 import { isBrowser } from './utils';
 
+type StylesheetProps = {
+  href: string;
+  media?: string;
+};
+
 export const StylesheetResource = createResource(
   load,
   ({ href, media }) => `${href}.${media}`
 );
 
-function load({ href, media = 'all' }) {
+function load({ href, media = 'all' }: StylesheetProps) {
   return new Promise((resolve, reject) => {
     const link = document.createElement('link');
     link.rel = 'stylesheet';
@@ -19,14 +24,14 @@ function load({ href, media = 'all' }) {
   });
 }
 
-export const Stylesheet = props => {
+export const Stylesheet: React.SFC<StylesheetProps> = props => {
   if (isBrowser) {
     StylesheetResource.read(props);
   }
 
   return <link {...props} />;
 };
 
-export function useStylesheet(props) {
+export function useStylesheet(props: StylesheetProps) {
   return StylesheetResource.read(props);
 }

src/Video.js → src/Video.tsx

@@ -2,18 +2,23 @@ import React from 'react';
 import { createResource } from './createResource';
 import { isBrowser } from './utils';
 
-export const VideoResource = createResource(src => {
+export const VideoResource = createResource((src: string) => {
   return new Promise((resolve, reject) => {
     const video = document.createElement('video');
     video.src = src;
     video.oncanplay = () => {
       resolve(video);
     };
     video.onerror = reject;
-  });
+  }) as Promise<HTMLVideoElement>;
 });
 
-export const Video = props => {
+export const Video: React.SFC<
+  React.DetailedHTMLProps<
+    React.VideoHTMLAttributes<HTMLVideoElement>,
+    HTMLVideoElement
+  >
+> = props => {
   if (isBrowser) {
     VideoResource.read(props.src);
   }

src/createResource.js → src/createResource.tsx

@@ -3,7 +3,7 @@ import {
   createResource as cSource,
 } from 'react-cache';
 
-let createResource;
+let createResource: typeof cSource;
 
 if (unstable_createResource) {
   createResource = unstable_createResource;

src/useDeviceMotion.js → src/useDeviceMotion.tsx

@@ -1,7 +1,15 @@
 import * as React from 'react';
 
 export const useDeviceMotion = () => {
-  const [motion, setMotion] = React.useState({
+  const [motion, setMotion] = React.useState<
+    Pick<
+      DeviceMotionEvent,
+      | 'acceleration'
+      | 'accelerationIncludingGravity'
+      | 'rotationRate'
+      | 'interval'
+    >
+  >({
     acceleration: {
       x: null,
       y: null,
@@ -21,7 +29,7 @@ export const useDeviceMotion = () => {
   });
 
   React.useEffect(() => {
-    const handle = deviceMotionEvent => {
+    const handle = (deviceMotionEvent: DeviceMotionEvent) => {
       setMotion(deviceMotionEvent);
     };
 

src/useDeviceOrientation.js → src/useDeviceOrientation.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
 
 export const useDeviceOrientation = () => {
-  const [orientation, setOrientation] = React.useState({
+  const [orientation, setOrientation] = React.useState<{
+    alpha: number | null;
+    beta: number | null;
+    gamma: number | null;
+    absolute: boolean;
+  }>({
     alpha: null,
     beta: null,
     gamma: null,
     absolute: false,
   });
 
-  const handle = e => {
+  const handle = (e: DeviceOrientationEvent) => {
     setOrientation({
       beta: e.beta,
       alpha: e.alpha,

src/useGeoPosition.js → src/useGeoPosition.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { createResource } from './createResource';
 
-const PositionResource = createResource(load, positionOptions => 'geoposition');
+const PositionResource = createResource(
+  load,
+  (positionOptions: PositionOptions) => 'geoposition'
+);
 
-function load(positionOptions) {
+function load(positionOptions: PositionOptions): Promise<Position> {
   return new Promise((resolve, reject) =>
     navigator.geolocation.getCurrentPosition(
       position => {
@@ -17,7 +20,7 @@ function load(positionOptions) {
   );
 }
 
-export const useGeoPosition = positionOptions => {
+export const useGeoPosition = (positionOptions: PositionOptions) => {
   // We should read new initialCoords for each component but useMemo
   // does not seem to memoize when a component is suspended
   // @todo determine if this is intended behavior or a bug

src/useIntersectionObserver.js → src/useIntersectionObserver.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 
-export const useIntersectionObserver = (target, root) => {
+export const useIntersectionObserver = (
+  target: React.RefObject<HTMLElement>,
+  root: React.RefObject<HTMLElement>
+) => {
   const [isIntersecting, setIntersecting] = React.useState(false);
 
   React.useEffect(() => {
@@ -19,7 +22,9 @@ export const useIntersectionObserver = (target, root) => {
       observer.observe(target.current);
     }
     return () => {
-      observer.unobserve(target.current);
+      if (target.current) {
+        observer.unobserve(target.current);
+      }
     };
   }, []);
 

src/useMedia.js → src/useMedia.tsx

@@ -1,7 +1,10 @@
 import { useState, useEffect } from 'react';
 import json2mq from 'json2mq';
 
-export function useMedia(query, defaultMatches = true) {
+export function useMedia(
+  query: string | { [key: string]: any },
+  defaultMatches = true
+) {
   const [matches, setMatches] = useState(defaultMatches);
 
   useEffect(() => {

src/useNetworkStatus.js → src/useNetworkStatus.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export const useNetworkStatus = () => {
   const [status, setStatus] = React.useState(navigator.onLine);
-  const [offlineAt, setOfflineAt] = React.useState();
+  const [offlineAt, setOfflineAt] = React.useState<Date | undefined>(undefined);
 
   React.useEffect(() => {
     const handleOnline = () => {

src/useWindowScrollPosition.js → src/useWindowScrollPosition.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import throttle from 'lodash/throttle';
 
-export const useWindowScrollPosition = (options = {}) => {
+export const useWindowScrollPosition = (
+  options: { throttleMs?: number } = {}
+) => {
   const { throttleMs = 100 } = options;
   const [scroll, setScroll] = React.useState({
     x: window.pageXOffset,

src/useWindowSize.js → src/useWindowSize.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import throttle from 'lodash/throttle';
 
-export const useWindowSize = (options = {}) => {
+export const useWindowSize = (options: { throttleMs?: number } = {}) => {
   const { throttleMs = 100 } = options;
   const [size, setSize] = React.useState({
     width: window.innerWidth,