refactor: 💡 use import hooks from React proper

src/__stories__/useAdopt.story.tsx

@@ -1,7 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useAdopt} from '..';
-import {useState, useCallback} from '../react';
+import {useState} from 'react';
 import ShowDocs from '../util/ShowDocs';
 import {Spring} from 'react-spring';
 

src/__stories__/useGetSet.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useGetSet} from '..';
-import {useState} from '../react';
+import {useState} from 'react';
 import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {

src/__stories__/useHoverDirty.story.tsx

@@ -1,6 +1,6 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
-import {useRef} from '../react';
+import {useRef} from 'react';
 import {useHoverDirty} from '..';
 import ShowDocs from '../util/ShowDocs';
 

src/__stories__/useOutsideClick.story.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useOutsideClick} from '..';
-import {useRef} from '../react';
+import {useRef} from 'react';
 import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {

src/createMemo.ts

@@ -1,4 +1,4 @@
-import {useMemo} from './react';
+import {useMemo} from 'react';
 
 const createMemo = fn => (...args) => useMemo(() => fn(...args), args);
 

src/react.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-export type UseState = <T>(initialState: T | (() => T)) => [T, (newState: T | ((newState) => T)) => void];
-export const useState: UseState = (React as any).useState;
-
-export type UseEffect = (didUpdate: () => ((() => void) | void), params?: any[]) => void;
-export const useEffect: UseEffect = (React as any).useEffect;
-
-export interface ReactRef<T> {current: T};
-export type UseRef = <T>(initialValue: T) => ReactRef<T>;
-export const useRef: UseRef = (React as any).useRef;
-
-export type UseCallback = <T extends ((...args: any[]) => any)>(callback: T, args: any[]) => T;
-export const useCallback: UseCallback = (React as any).useCallback;
-
-export type UseMemo = <T>(fn: Function, args: any[]) => T;
-export const useMemo: UseMemo = (React as any).useMemo;

src/useAsync.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect, useCallback} from './react';
+import {useState, useEffect, useCallback} from 'react';
 
 export interface AsyncState<T> {
   loading: boolean;

src/useBattery.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 import {on, off} from './util';
 
 export interface BatterySensorState {

src/useCounter.ts

@@ -1,5 +1,5 @@
 import useGetSet from './useGetSet';
-import {useCallback} from './react';
+import {useCallback} from 'react';
 
 export interface CounterActions {
   inc: (delta?: number) => void;

src/useCss.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 const {create} = require('nano-css');
 const {addon: addonCssom} = require('nano-css/addon/cssom');
 const {addon: addonPipe} = require('nano-css/addon/pipe');

src/useFavicon.ts

@@ -1,4 +1,4 @@
-import {useEffect} from './react';
+import {useEffect} from 'react';
 
 const useFavicon = (href: string) => {
   useEffect(() => {

src/useGeolocation.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 
 export interface GeoLocationSensorState {
   accuracy: number,

src/useGetSet.ts

@@ -1,4 +1,4 @@
-import {useRef, useCallback} from './react';
+import {useRef, useCallback} from 'react';
 import useUpdate from './useUpdate';
 
 const useGetSet = <T>(initialValue: T): [() => T, (value: T) => void] => {

src/useGetSetState.ts

@@ -1,4 +1,4 @@
-import {useRef, useCallback} from './react';
+import {useRef, useCallback} from 'react';
 import useUpdate from './useUpdate';
 
 const useGetSetState = <T extends object>(initialState: T = {} as T): [() => T, (patch: Partial<T>) => void]=> {

src/useHover.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import {useState} from './react';
+
+const {useState} = React;
 
 const noop = () => {};
 

src/useHoverDirty.ts

@@ -1,4 +1,4 @@
-import {useEffect, useState} from './react';
+import {useEffect, useState} from 'react';
 
 // kudos: https://usehooks.com/
 const useHoverDirty = (ref) => {

src/useIdle.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 import {on, off} from './util';
 import {throttle} from 'throttle-debounce';
 
@@ -23,7 +23,7 @@ const useIdle = (ms: number = oneMinute, initialState: boolean = false, events:
       if (localState) {
         set(false);
       }
-  
+
       clearTimeout(timeout);
       timeout = setTimeout(() => set(true), ms);
     });

src/useLifecycles.ts

@@ -1,4 +1,4 @@
-import {useEffect} from './react';
+import {useEffect} from 'react';
 
 const useLifecycles = (mount, unmount?) => {
   useEffect(() => {

src/useList.ts

@@ -1,4 +1,4 @@
-import {useState} from './react';
+import {useState} from 'react';
 
 export interface Actions<T> {
   set: (list: T[]) => void;

src/useLocalStorage.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 
 const isClient = typeof window === 'object';
 

src/useLocation.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 import {isClient, on, off} from './util';
 
 const patchHistoryMethod = (method) => {

src/useLogger.ts

@@ -1,4 +1,4 @@
-import {useEffect} from './react';
+import {useEffect} from 'react';
 import useLifecycles from './useLifecycles';
 
 const useLogger = (name, props) => {

src/useMap.ts

@@ -1,4 +1,4 @@
-import {useState} from './react';
+import {useState} from 'react';
 
 export interface Actions<K, V> {
   get: (key: K) => any;

src/useMedia.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 
 const useMedia = (query: string, defaultState: boolean = false) => {
   const [state, setState] = useState(defaultState);

src/useMediaDevices.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 import {on, off} from './util';
 
 const noop = () => {};

src/useMotion.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 import {on, off} from './util';
 
 export interface MotionSensorState {
@@ -50,7 +50,7 @@ const useMotion = (initialState: MotionSensorState = defaultState) => {
         rotationRate,
         interval
       } = event;
-    
+
       setState({
         acceleration: {
           x: acceleration.x,

src/useMount.ts

@@ -1,4 +1,4 @@
-import {useEffect} from './react';
+import {useEffect} from 'react';
 
 const useMount = (mount) => useEffect(mount, []);
 

src/useNetwork.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 import {on, off} from './util';
 
 export interface NetworkState {

src/useObservable.ts

@@ -1,13 +1,13 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 
 const useObservable = <T>(observable$, initialValue?: T): T | undefined => {
   const [value, update] = useState<T | undefined>(initialValue);
-  
+
   useEffect(() => {
     const s = observable$.subscribe(update)
     return () => s.unsubscribe();
   }, [observable$]);
-  
+
   return value;
 }
 

src/useOrientation.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 import {on, off} from './util';
 
 export interface OrientationState {
@@ -20,11 +20,11 @@ const useOrientation = (initialState: OrientationState = defaultState) => {
     const onChange = () => {
       if (mounted) {
         const {orientation} = screen as any;
-        
+
         if (!orientation) {
           setState(initialState);
         }
-        
+
         const {angle, type} = orientation;
         setState({angle, type});
       }

src/useRaf.ts

@@ -1,4 +1,4 @@
-import {useState, useLayoutEffect} from './react';
+import {useState, useLayoutEffect} from 'react';
 
 const useRaf = (ms: number = 1e12, delay: number = 0): number => {
   const [elapsed, set] = useState<number>(0);

src/useRenderProp.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import {useState, useCallback} from './react';
 import createMemo from './createMemo';
 
+const {useState, useCallback} = React;
+
 const useRenderProp = (element: React.ReactElement<any>): [React.ReactElement<any>, any[]] => {
   if (process.env.NODE_ENV !== 'production') {
     if (!React.isValidElement(element)) {

src/useSessionStorage.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 
 const isClient = typeof window === 'object';
 

src/useSetState.ts

@@ -1,4 +1,4 @@
-import {useState} from './react';
+import {useState} from 'react';
 
 const useSetState = <T extends object>(initialState: T = {} as T): [T, (patch: Partial<T> | Function) => void]=> {
   const [state, set] = useState<T>(initialState);

src/useSize.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import {useState, useEffect, useRef} from './react';
+
+const {useState, useEffect, useRef} = React;
 
 const isClient = typeof window === 'object';
 const DRAF = (callback: () => void) => setTimeout(callback, 35);
@@ -25,7 +26,7 @@ const useSize = (element: Element, {width = Infinity, height = Infinity}: Partia
   if (typeof element === 'function') {
     element = element(state);
   }
-  
+
   const style = element.props.style || {};
   const ref = useRef<HTMLIFrameElement | null>(null);
   let window: Window | null = null;

src/useSpeech.ts

@@ -1,4 +1,4 @@
-import {useRef} from './react';
+import {useRef} from 'react';
 import useSetState from './useSetState';
 import useMount from './useMount';
 

src/useSpring.ts

@@ -1,5 +1,5 @@
 import {SpringSystem, Spring} from 'rebound';
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 
 const useSpring = (targetValue: number = 0, tension: number = 50, friction: number = 3) => {
   const [spring, setSpring] = useState<Spring | null>(null);
@@ -32,7 +32,7 @@ const useSpring = (targetValue: number = 0, tension: number = 50, friction: numb
       spring.setEndValue(targetValue);
     }
   }, [targetValue]);
-  
+
   return value;
 };
 

src/useTimeout.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 
 const useTimeout = (ms: number = 0) => {
   const [ready, setReady] = useState(false);

src/useTitle.ts

@@ -1,4 +1,4 @@
-import {useEffect} from './react';
+import {useEffect} from 'react';
 
 const useTitle = (title: string) => {
   useEffect(() => {

src/useToggle.ts

@@ -1,4 +1,4 @@
-import {useState} from './react';
+import {useState} from 'react';
 
 export type UseToggle = (state: boolean) => [
   boolean, // state

src/useUnmount.ts

@@ -1,4 +1,4 @@
-import {useEffect} from './react';
+import {useEffect} from 'react';
 
 const useUnmount = (unmount) => {
   useEffect(() => () => {

src/useUpdate.ts

@@ -1,4 +1,4 @@
-import {useState} from './react';
+import {useState} from 'react';
 
 const useUpdate = () => useState(0)[1] as (() => void);
 

src/useWait.ts

@@ -1,4 +1,4 @@
-import { Waiter, useWait } from 'react-wait'
+import {Waiter, useWait} from 'react-wait';
 
 useWait.Waiter = Waiter;
 

src/useWindowSize.ts

@@ -1,4 +1,4 @@
-import {useState, useEffect} from './react';
+import {useState, useEffect} from 'react';
 
 const isClient = typeof window === 'object';
 
@@ -7,7 +7,7 @@ const useWindowSize = (initialWidth = Infinity, initialHeight = Infinity) => {
     width: isClient ? window.innerWidth : initialWidth,
     height: isClient ? window.innerHeight : initialHeight,
   });
-  
+
   useEffect(() => {
     const handler = () => {
       setState({

src/util/createHTMLMediaHook.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useEffect, useRef, ReactRef} from '../react';
+import {useEffect, useRef} from 'react';
 import useSetState from '../useSetState';
 import parseTimeRanges from './parseTimeRanges';
 
@@ -26,7 +26,7 @@ export interface HTMLMediaControls {
 }
 
 const createHTMLMediaHook = (tag: 'audio' | 'video') => {
-  const hook = (elOrProps: HTMLMediaProps | React.ReactElement<HTMLMediaProps>): [React.ReactElement<HTMLMediaProps>, HTMLMediaState, HTMLMediaControls, ReactRef<HTMLAudioElement | null>] => {
+  const hook = (elOrProps: HTMLMediaProps | React.ReactElement<HTMLMediaProps>): [React.ReactElement<HTMLMediaProps>, HTMLMediaState, HTMLMediaControls, {current: HTMLAudioElement | null}] => {
     let element: React.ReactElement<any> | undefined;
     let props: HTMLMediaProps;