(
+ nextState: IHookStateResolvable,
+ currentState?: C
+): S {
+ if (typeof nextState === 'function') {
+ return nextState.length ? (nextState as Function)(currentState) : (nextState as Function)();
+ }
+
+ return nextState;
+}
diff --git a/src/misc/isDeepEqual.ts b/src/misc/isDeepEqual.ts
new file mode 100644
index 0000000000..2cff67378a
--- /dev/null
+++ b/src/misc/isDeepEqual.ts
@@ -0,0 +1,3 @@
+import isDeepEqualReact from 'fast-deep-equal/react';
+
+export default isDeepEqualReact;
diff --git a/src/misc/parseTimeRanges.ts b/src/misc/parseTimeRanges.ts
new file mode 100644
index 0000000000..266479be28
--- /dev/null
+++ b/src/misc/parseTimeRanges.ts
@@ -0,0 +1,12 @@
+export default function parseTimeRanges(ranges) {
+ const result: { start: number; end: number }[] = [];
+
+ for (let i = 0; i < ranges.length; i++) {
+ result.push({
+ start: ranges.start(i),
+ end: ranges.end(i),
+ });
+ }
+
+ return result;
+}
diff --git a/src/misc/types.ts b/src/misc/types.ts
new file mode 100644
index 0000000000..5c7aa70874
--- /dev/null
+++ b/src/misc/types.ts
@@ -0,0 +1,3 @@
+export type PromiseType> = P extends Promise ? T : never;
+
+export type FunctionReturningPromise = (...args: any[]) => Promise;
diff --git a/src/misc/util.ts b/src/misc/util.ts
new file mode 100644
index 0000000000..34fa42c206
--- /dev/null
+++ b/src/misc/util.ts
@@ -0,0 +1,23 @@
+export const noop = () => {};
+
+export function on(
+ obj: T | null,
+ ...args: Parameters | [string, Function | null, ...any]
+): void {
+ if (obj && obj.addEventListener) {
+ obj.addEventListener(...(args as Parameters));
+ }
+}
+
+export function off(
+ obj: T | null,
+ ...args: Parameters | [string, Function | null, ...any]
+): void {
+ if (obj && obj.removeEventListener) {
+ obj.removeEventListener(...(args as Parameters));
+ }
+}
+
+export const isBrowser = typeof window !== 'undefined';
+
+export const isNavigator = typeof navigator !== 'undefined';
diff --git a/src/useAsync.ts b/src/useAsync.ts
index f9f2e1cc43..f30c85caa9 100644
--- a/src/useAsync.ts
+++ b/src/useAsync.ts
@@ -1,58 +1,20 @@
-import {useState, useEffect, useCallback} from 'react';
+import { DependencyList, useEffect } from 'react';
+import useAsyncFn from './useAsyncFn';
+import { FunctionReturningPromise } from './misc/types';
-export type AsyncState =
-| {
- loading: true;
- error?: undefined;
- value?: undefined;
-}
-| {
- loading: false;
- error: Error;
- value?: undefined;
-}
-| {
- loading: false;
- error?: undefined;
- value: T;
-};
+export { AsyncState, AsyncFnReturn } from './useAsyncFn';
-const useAsync = (fn: () => Promise, args?) => {
- const [state, set] = useState>({
+export default function useAsync(
+ fn: T,
+ deps: DependencyList = []
+) {
+ const [state, callback] = useAsyncFn(fn, deps, {
loading: true,
});
- const memoized = useCallback(fn, args);
useEffect(() => {
- let mounted = true;
- set({
- loading: true,
- });
- const promise = memoized();
-
- promise
- .then(value => {
- if (mounted) {
- set({
- loading: false,
- value,
- });
- }
- }, error => {
- if (mounted) {
- set({
- loading: false,
- error,
- });
- }
- });
-
- return () => {
- mounted = false;
- };
- }, [memoized]);
+ callback();
+ }, [callback]);
return state;
-};
-
-export default useAsync;
+}
diff --git a/src/useAsyncFn.ts b/src/useAsyncFn.ts
new file mode 100644
index 0000000000..d330ffbadc
--- /dev/null
+++ b/src/useAsyncFn.ts
@@ -0,0 +1,67 @@
+import { DependencyList, useCallback, useRef, useState } from 'react';
+import useMountedState from './useMountedState';
+import { FunctionReturningPromise, PromiseType } from './misc/types';
+
+export type AsyncState =
+ | {
+ loading: boolean;
+ error?: undefined;
+ value?: undefined;
+ }
+ | {
+ loading: true;
+ error?: Error | undefined;
+ value?: T;
+ }
+ | {
+ loading: false;
+ error: Error;
+ value?: undefined;
+ }
+ | {
+ loading: false;
+ error?: undefined;
+ value: T;
+ };
+
+type StateFromFunctionReturningPromise = AsyncState<
+ PromiseType>
+>;
+
+export type AsyncFnReturn = [
+ StateFromFunctionReturningPromise,
+ T
+];
+
+export default function useAsyncFn(
+ fn: T,
+ deps: DependencyList = [],
+ initialState: StateFromFunctionReturningPromise = { loading: false }
+): AsyncFnReturn {
+ const lastCallId = useRef(0);
+ const isMounted = useMountedState();
+ const [state, set] = useState>(initialState);
+
+ const callback = useCallback((...args: Parameters): ReturnType => {
+ const callId = ++lastCallId.current;
+
+ if (!state.loading) {
+ set((prevState) => ({ ...prevState, loading: true }));
+ }
+
+ return fn(...args).then(
+ (value) => {
+ isMounted() && callId === lastCallId.current && set({ value, loading: false });
+
+ return value;
+ },
+ (error) => {
+ isMounted() && callId === lastCallId.current && set({ error, loading: false });
+
+ return error;
+ }
+ ) as ReturnType;
+ }, deps);
+
+ return [state, callback as unknown as T];
+}
diff --git a/src/useAsyncRetry.ts b/src/useAsyncRetry.ts
new file mode 100644
index 0000000000..04119d957f
--- /dev/null
+++ b/src/useAsyncRetry.ts
@@ -0,0 +1,30 @@
+import { DependencyList, useCallback, useState } from 'react';
+import useAsync, { AsyncState } from './useAsync';
+
+export type AsyncStateRetry = AsyncState & {
+ retry(): void;
+};
+
+const useAsyncRetry = (fn: () => Promise, deps: DependencyList = []) => {
+ const [attempt, setAttempt] = useState(0);
+ const state = useAsync(fn, [...deps, attempt]);
+
+ const stateLoading = state.loading;
+ const retry = useCallback(() => {
+ if (stateLoading) {
+ if (process.env.NODE_ENV === 'development') {
+ console.log(
+ 'You are calling useAsyncRetry hook retry() method while loading in progress, this is a no-op.'
+ );
+ }
+
+ return;
+ }
+
+ setAttempt((currentAttempt) => currentAttempt + 1);
+ }, [...deps, stateLoading]);
+
+ return { ...state, retry };
+};
+
+export default useAsyncRetry;
diff --git a/src/useAudio.ts b/src/useAudio.ts
index b5c0b3e47f..8861d93933 100644
--- a/src/useAudio.ts
+++ b/src/useAudio.ts
@@ -1,5 +1,4 @@
-import createHTMLMediaHook from './util/createHTMLMediaHook';
-
-const useAudio = createHTMLMediaHook('audio');
+import createHTMLMediaHook from './factory/createHTMLMediaHook';
+const useAudio = createHTMLMediaHook('audio');
export default useAudio;
diff --git a/src/useBattery.ts b/src/useBattery.ts
index e699b55f63..80d118ac74 100644
--- a/src/useBattery.ts
+++ b/src/useBattery.ts
@@ -1,56 +1,83 @@
-import {useState, useEffect} from 'react';
-import {on, off} from './util';
+import { useEffect, useState } from 'react';
+import { isNavigator, off, on } from './misc/util';
+import isDeepEqual from './misc/isDeepEqual';
-export interface BatterySensorState {
+export interface BatteryState {
charging: boolean;
- level: number;
chargingTime: number;
dischargingTime: number;
+ level: number;
}
-const useBattery = () => {
- const [state, setState] = useState({});
- let mounted = true;
- let battery: any = null;
-
- const onChange = () => {
- const {charging, level, chargingTime, dischargingTime} = battery;
- setState({
- charging,
- level,
- chargingTime,
- dischargingTime
- });
- };
+interface BatteryManager extends Readonly, EventTarget {
+ onchargingchange: () => void;
+ onchargingtimechange: () => void;
+ ondischargingtimechange: () => void;
+ onlevelchange: () => void;
+}
- const onBattery = () => {
- onChange();
- on(battery, 'chargingchange', onChange);
- on(battery, 'levelchange', onChange);
- on(battery, 'chargingtimechange', onChange);
- on(battery, 'dischargingtimechange', onChange);
- };
+interface NavigatorWithPossibleBattery extends Navigator {
+ getBattery?: () => Promise;
+}
+
+type UseBatteryState =
+ | { isSupported: false } // Battery API is not supported
+ | { isSupported: true; fetched: false } // battery API supported but not fetched yet
+ | (BatteryState & { isSupported: true; fetched: true }); // battery API supported and fetched
+
+const nav: NavigatorWithPossibleBattery | undefined = isNavigator ? navigator : undefined;
+const isBatteryApiSupported = nav && typeof nav.getBattery === 'function';
+
+function useBatteryMock(): UseBatteryState {
+ return { isSupported: false };
+}
+
+function useBattery(): UseBatteryState {
+ const [state, setState] = useState({ isSupported: true, fetched: false });
useEffect(() => {
- (navigator as any).getBattery().then((bat: any) => {
- if (mounted) {
- battery = bat;
- onBattery();
+ let isMounted = true;
+ let battery: BatteryManager | null = null;
+
+ const handleChange = () => {
+ if (!isMounted || !battery) {
+ return;
}
+ const newState: UseBatteryState = {
+ isSupported: true,
+ fetched: true,
+ level: battery.level,
+ charging: battery.charging,
+ dischargingTime: battery.dischargingTime,
+ chargingTime: battery.chargingTime,
+ };
+ !isDeepEqual(state, newState) && setState(newState);
+ };
+
+ nav!.getBattery!().then((bat: BatteryManager) => {
+ if (!isMounted) {
+ return;
+ }
+ battery = bat;
+ on(battery, 'chargingchange', handleChange);
+ on(battery, 'chargingtimechange', handleChange);
+ on(battery, 'dischargingtimechange', handleChange);
+ on(battery, 'levelchange', handleChange);
+ handleChange();
});
return () => {
- mounted = false;
+ isMounted = false;
if (battery) {
- off(battery, 'chargingchange', onChange);
- off(battery, 'levelchange', onChange);
- off(battery, 'chargingtimechange', onChange);
- off(battery, 'dischargingtimechange', onChange);
+ off(battery, 'chargingchange', handleChange);
+ off(battery, 'chargingtimechange', handleChange);
+ off(battery, 'dischargingtimechange', handleChange);
+ off(battery, 'levelchange', handleChange);
}
};
- }, [0]);
+ }, []);
return state;
-};
+}
-export default useBattery;
+export default isBatteryApiSupported ? useBattery : useBatteryMock;
diff --git a/src/useBeforeUnload.ts b/src/useBeforeUnload.ts
new file mode 100644
index 0000000000..4d12e77aa6
--- /dev/null
+++ b/src/useBeforeUnload.ts
@@ -0,0 +1,35 @@
+import { useCallback, useEffect } from 'react';
+import { off, on } from './misc/util';
+
+const useBeforeUnload = (enabled: boolean | (() => boolean) = true, message?: string) => {
+ const handler = useCallback(
+ (event: BeforeUnloadEvent) => {
+ const finalEnabled = typeof enabled === 'function' ? enabled() : true;
+
+ if (!finalEnabled) {
+ return;
+ }
+
+ event.preventDefault();
+
+ if (message) {
+ event.returnValue = message;
+ }
+
+ return message;
+ },
+ [enabled, message]
+ );
+
+ useEffect(() => {
+ if (!enabled) {
+ return;
+ }
+
+ on(window, 'beforeunload', handler);
+
+ return () => off(window, 'beforeunload', handler);
+ }, [enabled, handler]);
+};
+
+export default useBeforeUnload;
diff --git a/src/useCallbag.ts b/src/useCallbag.ts
deleted file mode 100644
index d79e666001..0000000000
--- a/src/useCallbag.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useCallbag from 'use-callbag'
-
-export default useCallbag;
-
diff --git a/src/useClickAway.ts b/src/useClickAway.ts
new file mode 100644
index 0000000000..e5367d0f8d
--- /dev/null
+++ b/src/useClickAway.ts
@@ -0,0 +1,31 @@
+import { RefObject, useEffect, useRef } from 'react';
+import { off, on } from './misc/util';
+
+const defaultEvents = ['mousedown', 'touchstart'];
+
+const useClickAway = (
+ ref: RefObject,
+ onClickAway: (event: E) => void,
+ events: string[] = defaultEvents
+) => {
+ const savedCallback = useRef(onClickAway);
+ useEffect(() => {
+ savedCallback.current = onClickAway;
+ }, [onClickAway]);
+ useEffect(() => {
+ const handler = (event) => {
+ const { current: el } = ref;
+ el && !el.contains(event.target) && savedCallback.current(event);
+ };
+ for (const eventName of events) {
+ on(document, eventName, handler);
+ }
+ return () => {
+ for (const eventName of events) {
+ off(document, eventName, handler);
+ }
+ };
+ }, [events, ref]);
+};
+
+export default useClickAway;
diff --git a/src/useCookie.ts b/src/useCookie.ts
new file mode 100644
index 0000000000..4bdd6c96de
--- /dev/null
+++ b/src/useCookie.ts
@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+import Cookies from 'js-cookie';
+
+const useCookie = (
+ cookieName: string
+): [string | null, (newValue: string, options?: Cookies.CookieAttributes) => void, () => void] => {
+ const [value, setValue] = useState(() => Cookies.get(cookieName) || null);
+
+ const updateCookie = useCallback(
+ (newValue: string, options?: Cookies.CookieAttributes) => {
+ Cookies.set(cookieName, newValue, options);
+ setValue(newValue);
+ },
+ [cookieName]
+ );
+
+ const deleteCookie = useCallback(() => {
+ Cookies.remove(cookieName);
+ setValue(null);
+ }, [cookieName]);
+
+ return [value, updateCookie, deleteCookie];
+};
+
+export default useCookie;
diff --git a/src/useCopyToClipboard.ts b/src/useCopyToClipboard.ts
new file mode 100644
index 0000000000..9656d9efd7
--- /dev/null
+++ b/src/useCopyToClipboard.ts
@@ -0,0 +1,70 @@
+import writeText from 'copy-to-clipboard';
+import { useCallback } from 'react';
+import useMountedState from './useMountedState';
+import useSetState from './useSetState';
+
+export interface CopyToClipboardState {
+ value?: string;
+ noUserInteraction: boolean;
+ error?: Error;
+}
+
+const useCopyToClipboard = (): [CopyToClipboardState, (value: string) => void] => {
+ const isMounted = useMountedState();
+ const [state, setState] = useSetState({
+ value: undefined,
+ error: undefined,
+ noUserInteraction: true,
+ });
+
+ const copyToClipboard = useCallback((value) => {
+ if (!isMounted()) {
+ return;
+ }
+ let noUserInteraction;
+ let normalizedValue;
+ try {
+ // only strings and numbers casted to strings can be copied to clipboard
+ if (typeof value !== 'string' && typeof value !== 'number') {
+ const error = new Error(
+ `Cannot copy typeof ${typeof value} to clipboard, must be a string`
+ );
+ if (process.env.NODE_ENV === 'development') console.error(error);
+ setState({
+ value,
+ error,
+ noUserInteraction: true,
+ });
+ return;
+ }
+ // empty strings are also considered invalid
+ else if (value === '') {
+ const error = new Error(`Cannot copy empty string to clipboard.`);
+ if (process.env.NODE_ENV === 'development') console.error(error);
+ setState({
+ value,
+ error,
+ noUserInteraction: true,
+ });
+ return;
+ }
+ normalizedValue = value.toString();
+ noUserInteraction = writeText(normalizedValue);
+ setState({
+ value: normalizedValue,
+ error: undefined,
+ noUserInteraction,
+ });
+ } catch (error) {
+ setState({
+ value: normalizedValue,
+ error,
+ noUserInteraction,
+ });
+ }
+ }, []);
+
+ return [state, copyToClipboard];
+};
+
+export default useCopyToClipboard;
diff --git a/src/useCounter.ts b/src/useCounter.ts
index 44a075bc5e..cb4a3b830a 100644
--- a/src/useCounter.ts
+++ b/src/useCounter.ts
@@ -1,31 +1,97 @@
+import { useMemo } from 'react';
import useGetSet from './useGetSet';
-import {useCallback} from 'react';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState';
export interface CounterActions {
inc: (delta?: number) => void;
dec: (delta?: number) => void;
get: () => number;
- set: (value: number) => void;
- reset: (value?: number) => void;
+ set: (value: IHookStateSetAction) => void;
+ reset: (value?: IHookStateSetAction) => void;
}
-const useCounter = (initialValue: number = 0): [number, CounterActions] => {
- const [get, set] = useGetSet(initialValue);
- const inc = useCallback((delta: number = 1) => set(get() + delta), []);
- const dec = useCallback((delta: number = 1) => inc(-delta), []);
- const reset = useCallback((value: number = initialValue) => {
- initialValue = value;
- set(value);
- }, []);
- const actions = {
- inc,
- dec,
- get,
- set,
- reset,
- };
-
- return [get(), actions];
-};
-
-export default useCounter;
+export default function useCounter(
+ initialValue: IHookStateInitAction = 0,
+ max: number | null = null,
+ min: number | null = null
+): [number, CounterActions] {
+ let init = resolveHookState(initialValue);
+
+ typeof init !== 'number' &&
+ console.error('initialValue has to be a number, got ' + typeof initialValue);
+
+ if (typeof min === 'number') {
+ init = Math.max(init, min);
+ } else if (min !== null) {
+ console.error('min has to be a number, got ' + typeof min);
+ }
+
+ if (typeof max === 'number') {
+ init = Math.min(init, max);
+ } else if (max !== null) {
+ console.error('max has to be a number, got ' + typeof max);
+ }
+
+ const [get, setInternal] = useGetSet(init);
+
+ return [
+ get(),
+ useMemo(() => {
+ const set = (newState: IHookStateSetAction) => {
+ const prevState = get();
+ let rState = resolveHookState(newState, prevState);
+
+ if (prevState !== rState) {
+ if (typeof min === 'number') {
+ rState = Math.max(rState, min);
+ }
+ if (typeof max === 'number') {
+ rState = Math.min(rState, max);
+ }
+
+ prevState !== rState && setInternal(rState);
+ }
+ };
+
+ return {
+ get,
+ set,
+ inc: (delta: IHookStateSetAction = 1) => {
+ const rDelta = resolveHookState(delta, get());
+
+ if (typeof rDelta !== 'number') {
+ console.error(
+ 'delta has to be a number or function returning a number, got ' + typeof rDelta
+ );
+ }
+
+ set((num: number) => num + rDelta);
+ },
+ dec: (delta: IHookStateSetAction = 1) => {
+ const rDelta = resolveHookState(delta, get());
+
+ if (typeof rDelta !== 'number') {
+ console.error(
+ 'delta has to be a number or function returning a number, got ' + typeof rDelta
+ );
+ }
+
+ set((num: number) => num - rDelta);
+ },
+ reset: (value: IHookStateSetAction = init) => {
+ const rValue = resolveHookState(value, get());
+
+ if (typeof rValue !== 'number') {
+ console.error(
+ 'value has to be a number or function returning a number, got ' + typeof rValue
+ );
+ }
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ init = rValue;
+ set(rValue);
+ },
+ };
+ }, [init, min, max]),
+ ];
+}
diff --git a/src/useCss.ts b/src/useCss.ts
index 39e7d3d32f..5617fe3f97 100644
--- a/src/useCss.ts
+++ b/src/useCss.ts
@@ -1,48 +1,32 @@
-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');
+import { create, NanoRenderer } from 'nano-css';
+import { addon as addonCSSOM, CSSOMAddon } from 'nano-css/addon/cssom';
+import { addon as addonVCSSOM, VCSSOMAddon } from 'nano-css/addon/vcssom';
+import { cssToTree } from 'nano-css/addon/vcssom/cssToTree';
+import { useMemo } from 'react';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
-export interface CssPipe {
- className: string;
- css: (css: object) => void;
- remove: () => void;
-}
+type Nano = NanoRenderer & CSSOMAddon & VCSSOMAddon;
+const nano = create() as Nano;
+addonCSSOM(nano);
+addonVCSSOM(nano);
-const flattenSelectors = (css) => {
- const flatenned = {};
- const amp = {};
- let hasAmp = false;
-
- for (const key in css) {
- const value = css[key];
- if (typeof value === 'object') {
- flatenned[key] = value;
- } else {
- hasAmp = true;
- amp[key] = value;
- }
- }
- if (hasAmp) {
- flatenned['&'] = amp;
- }
-
- return flatenned;
-};
-
-const nano = create();
-addonCssom(nano);
-addonPipe(nano);
+let counter = 0;
const useCss = (css: object): string => {
- const [pipe] = useState(nano.pipe());
+ const className = useMemo(() => 'react-use-css-' + (counter++).toString(36), []);
+ const sheet = useMemo(() => new nano.VSheet(), []);
+
+ useIsomorphicLayoutEffect(() => {
+ const tree = {};
+ cssToTree(tree, css, '.' + className, '');
+ sheet.diff(tree);
- useEffect(() => {
- pipe.css(flattenSelectors(css));
- return () => pipe.remove();
+ return () => {
+ sheet.diff({});
+ };
});
- return pipe.className;
+ return className;
};
export default useCss;
diff --git a/src/useCustomCompareEffect.ts b/src/useCustomCompareEffect.ts
new file mode 100644
index 0000000000..0ac38bb1c4
--- /dev/null
+++ b/src/useCustomCompareEffect.ts
@@ -0,0 +1,41 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+const isPrimitive = (val: any) => val !== Object(val);
+
+type DepsEqualFnType = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
+
+const useCustomCompareEffect = (
+ effect: EffectCallback,
+ deps: TDeps,
+ depsEqual: DepsEqualFnType
+) => {
+ if (process.env.NODE_ENV !== 'production') {
+ if (!(deps instanceof Array) || !deps.length) {
+ console.warn(
+ '`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.'
+ );
+ }
+
+ if (deps.every(isPrimitive)) {
+ console.warn(
+ '`useCustomCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.'
+ );
+ }
+
+ if (typeof depsEqual !== 'function') {
+ console.warn(
+ '`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list'
+ );
+ }
+ }
+
+ const ref = useRef(undefined);
+
+ if (!ref.current || !depsEqual(deps, ref.current)) {
+ ref.current = deps;
+ }
+
+ useEffect(effect, ref.current);
+};
+
+export default useCustomCompareEffect;
diff --git a/src/useDebounce.ts b/src/useDebounce.ts
index 219d6cac1d..70956d82a1 100644
--- a/src/useDebounce.ts
+++ b/src/useDebounce.ts
@@ -1,14 +1,16 @@
-import { useEffect } from 'react';
+import { DependencyList, useEffect } from 'react';
+import useTimeoutFn from './useTimeoutFn';
-const useDebounce = (fn: () => any, ms: number = 0, args: Array = []) => {
- useEffect(() => {
- let handle = setTimeout(fn.bind(null, args), ms);
+export type UseDebounceReturn = [() => boolean | null, () => void];
- return () => {
- // if args change then clear timeout
- clearTimeout(handle);
- }
- }, args);
-};
+export default function useDebounce(
+ fn: Function,
+ ms: number = 0,
+ deps: DependencyList = []
+): UseDebounceReturn {
+ const [isReady, cancel, reset] = useTimeoutFn(fn, ms);
-export default useDebounce;
+ useEffect(reset, deps);
+
+ return [isReady, cancel];
+}
diff --git a/src/useDeepCompareEffect.ts b/src/useDeepCompareEffect.ts
new file mode 100644
index 0000000000..14c08c4ff0
--- /dev/null
+++ b/src/useDeepCompareEffect.ts
@@ -0,0 +1,25 @@
+import { DependencyList, EffectCallback } from 'react';
+import useCustomCompareEffect from './useCustomCompareEffect';
+import isDeepEqual from './misc/isDeepEqual';
+
+const isPrimitive = (val: any) => val !== Object(val);
+
+const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
+ if (process.env.NODE_ENV !== 'production') {
+ if (!(deps instanceof Array) || !deps.length) {
+ console.warn(
+ '`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.'
+ );
+ }
+
+ if (deps.every(isPrimitive)) {
+ console.warn(
+ '`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.'
+ );
+ }
+ }
+
+ useCustomCompareEffect(effect, deps, isDeepEqual);
+};
+
+export default useDeepCompareEffect;
diff --git a/src/useDefault.ts b/src/useDefault.ts
new file mode 100644
index 0000000000..3234e2c4e9
--- /dev/null
+++ b/src/useDefault.ts
@@ -0,0 +1,16 @@
+import { useState } from 'react';
+
+const useDefault = (
+ defaultValue: TStateType,
+ initialValue: TStateType | (() => TStateType)
+) => {
+ const [value, setValue] = useState(initialValue);
+
+ if (value === undefined || value === null) {
+ return [defaultValue, setValue] as const;
+ }
+
+ return [value, setValue] as const;
+};
+
+export default useDefault;
diff --git a/src/useDrop.ts b/src/useDrop.ts
new file mode 100644
index 0000000000..c4c353a9f1
--- /dev/null
+++ b/src/useDrop.ts
@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { noop, off, on } from './misc/util';
+
+export interface DropAreaState {
+ over: boolean;
+}
+
+export interface DropAreaBond {
+ onDragOver: React.DragEventHandler;
+ onDragEnter: React.DragEventHandler;
+ onDragLeave: React.DragEventHandler;
+ onDrop: React.DragEventHandler;
+ onPaste: React.ClipboardEventHandler;
+}
+
+export interface DropAreaOptions {
+ onFiles?: (files: File[], event?) => void;
+ onText?: (text: string, event?) => void;
+ onUri?: (url: string, event?) => void;
+}
+
+const createProcess = (options: DropAreaOptions) => (dataTransfer: DataTransfer, event) => {
+ const uri = dataTransfer.getData('text/uri-list');
+
+ if (uri) {
+ (options.onUri || noop)(uri, event);
+ return;
+ }
+
+ if (dataTransfer.files && dataTransfer.files.length) {
+ (options.onFiles || noop)(Array.from(dataTransfer.files), event);
+ return;
+ }
+
+ if (event.clipboardData) {
+ const text = event.clipboardData.getData('text');
+ (options.onText || noop)(text, event);
+ return;
+ }
+};
+
+const useDrop = (options: DropAreaOptions = {}, args = []): DropAreaState => {
+ const { onFiles, onText, onUri } = options;
+ const [over, setOverRaw] = useState(false);
+ const setOver = useCallback(setOverRaw, []);
+ const process = useMemo(() => createProcess(options), [onFiles, onText, onUri]);
+
+ useEffect(() => {
+ const onDragOver = (event) => {
+ event.preventDefault();
+ setOver(true);
+ };
+
+ const onDragEnter = (event) => {
+ event.preventDefault();
+ setOver(true);
+ };
+
+ const onDragLeave = () => {
+ setOver(false);
+ };
+
+ const onDragExit = () => {
+ setOver(false);
+ };
+
+ const onDrop = (event) => {
+ event.preventDefault();
+ setOver(false);
+ process(event.dataTransfer, event);
+ };
+
+ const onPaste = (event) => {
+ process(event.clipboardData, event);
+ };
+
+ on(document, 'dragover', onDragOver);
+ on(document, 'dragenter', onDragEnter);
+ on(document, 'dragleave', onDragLeave);
+ on(document, 'dragexit', onDragExit);
+ on(document, 'drop', onDrop);
+ if (onText) {
+ on(document, 'paste', onPaste);
+ }
+
+ return () => {
+ off(document, 'dragover', onDragOver);
+ off(document, 'dragenter', onDragEnter);
+ off(document, 'dragleave', onDragLeave);
+ off(document, 'dragexit', onDragExit);
+ off(document, 'drop', onDrop);
+ off(document, 'paste', onPaste);
+ };
+ }, [process, ...args]);
+
+ return { over };
+};
+
+export default useDrop;
diff --git a/src/useDropArea.ts b/src/useDropArea.ts
index 9710b7094e..52ca8fae62 100644
--- a/src/useDropArea.ts
+++ b/src/useDropArea.ts
@@ -1,14 +1,85 @@
-import * as React from 'react';
-
-const useDropArea = (el: React.ReactElement) => {
- if (process.env.NODE_ENV !== 'production') {
- if (!React.isValidElement(el)) {
- throw new TypeError(
- 'useDropArea first argument must be a valid ' +
- 'React element, such as .'
- );
+import { useMemo, useState } from 'react';
+import useMountedState from './useMountedState';
+import { noop } from './misc/util';
+
+export interface DropAreaState {
+ over: boolean;
+}
+
+export interface DropAreaBond {
+ onDragOver: React.DragEventHandler;
+ onDragEnter: React.DragEventHandler;
+ onDragLeave: React.DragEventHandler;
+ onDrop: React.DragEventHandler;
+ onPaste: React.ClipboardEventHandler;
+}
+
+export interface DropAreaOptions {
+ onFiles?: (files: File[], event?) => void;
+ onText?: (text: string, event?) => void;
+ onUri?: (url: string, event?) => void;
+}
+
+/*
+const defaultState: DropAreaState = {
+ over: false,
+};
+*/
+
+const createProcess =
+ (options: DropAreaOptions, mounted: boolean) => (dataTransfer: DataTransfer, event) => {
+ const uri = dataTransfer.getData('text/uri-list');
+
+ if (uri) {
+ (options.onUri || noop)(uri, event);
+ return;
}
- }
+
+ if (dataTransfer.files && dataTransfer.files.length) {
+ (options.onFiles || noop)(Array.from(dataTransfer.files), event);
+ return;
+ }
+
+ if (dataTransfer.items && dataTransfer.items.length) {
+ dataTransfer.items[0].getAsString((text) => {
+ if (mounted) {
+ (options.onText || noop)(text, event);
+ }
+ });
+ }
+ };
+
+const createBond = (process, setOver): DropAreaBond => ({
+ onDragOver: (event) => {
+ event.preventDefault();
+ },
+ onDragEnter: (event) => {
+ event.preventDefault();
+ setOver(true);
+ },
+ onDragLeave: () => {
+ setOver(false);
+ },
+ onDrop: (event) => {
+ event.preventDefault();
+ event.persist();
+ setOver(false);
+ process(event.dataTransfer, event);
+ },
+ onPaste: (event) => {
+ event.persist();
+ process(event.clipboardData, event);
+ },
+});
+
+const useDropArea = (options: DropAreaOptions = {}): [DropAreaBond, DropAreaState] => {
+ const { onFiles, onText, onUri } = options;
+ const isMounted = useMountedState();
+ const [over, setOver] = useState(false);
+ const process = useMemo(() => createProcess(options, isMounted()), [onFiles, onText, onUri]);
+ const bond: DropAreaBond = useMemo(() => createBond(process, setOver), [process, setOver]);
+
+ return [bond, { over }];
};
export default useDropArea;
diff --git a/src/useEffectOnce.ts b/src/useEffectOnce.ts
new file mode 100644
index 0000000000..e0e9ee31fa
--- /dev/null
+++ b/src/useEffectOnce.ts
@@ -0,0 +1,7 @@
+import { EffectCallback, useEffect } from 'react';
+
+const useEffectOnce = (effect: EffectCallback) => {
+ useEffect(effect, []);
+};
+
+export default useEffectOnce;
diff --git a/src/useEnsuredForwardedRef.ts b/src/useEnsuredForwardedRef.ts
new file mode 100644
index 0000000000..ad26fd1a72
--- /dev/null
+++ b/src/useEnsuredForwardedRef.ts
@@ -0,0 +1,35 @@
+import {
+ forwardRef,
+ ForwardRefExoticComponent,
+ MutableRefObject,
+ PropsWithChildren,
+ PropsWithoutRef,
+ RefAttributes,
+ RefForwardingComponent,
+ useEffect,
+ useRef,
+} from 'react';
+
+export default function useEnsuredForwardedRef(
+ forwardedRef: MutableRefObject
+): MutableRefObject {
+ const ensuredRef = useRef(forwardedRef && forwardedRef.current);
+
+ useEffect(() => {
+ if (!forwardedRef) {
+ return;
+ }
+ forwardedRef.current = ensuredRef.current;
+ }, [forwardedRef]);
+
+ return ensuredRef;
+}
+
+export function ensuredForwardRef(
+ Component: RefForwardingComponent
+): ForwardRefExoticComponent & RefAttributes> {
+ return forwardRef((props: PropsWithChildren, ref) => {
+ const ensuredRef = useEnsuredForwardedRef(ref as MutableRefObject);
+ return Component(props, ensuredRef);
+ });
+}
diff --git a/src/useError.ts b/src/useError.ts
new file mode 100644
index 0000000000..506549da77
--- /dev/null
+++ b/src/useError.ts
@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const useError = (): ((err: Error) => void) => {
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (error) {
+ throw error;
+ }
+ }, [error]);
+
+ const dispatchError = useCallback((err: Error) => {
+ setError(err);
+ }, []);
+
+ return dispatchError;
+};
+
+export default useError;
diff --git a/src/useEvent.ts b/src/useEvent.ts
new file mode 100644
index 0000000000..c0a1673051
--- /dev/null
+++ b/src/useEvent.ts
@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import { isBrowser, off, on } from './misc/util';
+
+export interface ListenerType1 {
+ addEventListener(name: string, handler: (event?: any) => void, ...args: any[]);
+
+ removeEventListener(name: string, handler: (event?: any) => void, ...args: any[]);
+}
+
+export interface ListenerType2 {
+ on(name: string, handler: (event?: any) => void, ...args: any[]);
+
+ off(name: string, handler: (event?: any) => void, ...args: any[]);
+}
+
+export type UseEventTarget = ListenerType1 | ListenerType2;
+
+const defaultTarget = isBrowser ? window : null;
+
+const isListenerType1 = (target: any): target is ListenerType1 => {
+ return !!target.addEventListener;
+};
+const isListenerType2 = (target: any): target is ListenerType2 => {
+ return !!target.on;
+};
+
+type AddEventListener = T extends ListenerType1
+ ? T['addEventListener']
+ : T extends ListenerType2
+ ? T['on']
+ : never;
+
+export type UseEventOptions = Parameters>[2];
+
+const useEvent = (
+ name: Parameters>[0],
+ handler?: null | undefined | Parameters>[1],
+ target: null | T | Window = defaultTarget,
+ options?: UseEventOptions
+) => {
+ useEffect(() => {
+ if (!handler) {
+ return;
+ }
+ if (!target) {
+ return;
+ }
+ if (isListenerType1(target)) {
+ on(target, name, handler, options);
+ } else if (isListenerType2(target)) {
+ target.on(name, handler, options);
+ }
+ return () => {
+ if (isListenerType1(target)) {
+ off(target, name, handler, options);
+ } else if (isListenerType2(target)) {
+ target.off(name, handler, options);
+ }
+ };
+ }, [name, handler, target, JSON.stringify(options)]);
+};
+
+export default useEvent;
diff --git a/src/useFavicon.ts b/src/useFavicon.ts
index ee04d653c2..b470cf223e 100644
--- a/src/useFavicon.ts
+++ b/src/useFavicon.ts
@@ -1,8 +1,9 @@
-import {useEffect} from 'react';
+import { useEffect } from 'react';
const useFavicon = (href: string) => {
useEffect(() => {
- const link: HTMLLinkElement = document.querySelector("link[rel*='icon']") || document.createElement('link');
+ const link: HTMLLinkElement =
+ document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = href;
diff --git a/src/useFirstMountState.ts b/src/useFirstMountState.ts
new file mode 100644
index 0000000000..cf210622a2
--- /dev/null
+++ b/src/useFirstMountState.ts
@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+
+export function useFirstMountState(): boolean {
+ const isFirst = useRef(true);
+
+ if (isFirst.current) {
+ isFirst.current = false;
+
+ return true;
+ }
+
+ return isFirst.current;
+}
diff --git a/src/useFullscreen.ts b/src/useFullscreen.ts
new file mode 100644
index 0000000000..f795bb3b14
--- /dev/null
+++ b/src/useFullscreen.ts
@@ -0,0 +1,81 @@
+import { RefObject, useState } from 'react';
+import screenfull from 'screenfull';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+import { noop, off, on } from './misc/util';
+
+export interface FullScreenOptions {
+ video?: RefObject<
+ HTMLVideoElement & { webkitEnterFullscreen?: () => void; webkitExitFullscreen?: () => void }
+ >;
+ onClose?: (error?: Error) => void;
+}
+
+const useFullscreen = (
+ ref: RefObject,
+ enabled: boolean,
+ options: FullScreenOptions = {}
+): boolean => {
+ const { video, onClose = noop } = options;
+ const [isFullscreen, setIsFullscreen] = useState(enabled);
+
+ useIsomorphicLayoutEffect(() => {
+ if (!enabled) {
+ return;
+ }
+ if (!ref.current) {
+ return;
+ }
+
+ const onWebkitEndFullscreen = () => {
+ if (video?.current) {
+ off(video.current, 'webkitendfullscreen', onWebkitEndFullscreen);
+ }
+ onClose();
+ };
+
+ const onChange = () => {
+ if (screenfull.isEnabled) {
+ const isScreenfullFullscreen = screenfull.isFullscreen;
+ setIsFullscreen(isScreenfullFullscreen);
+ if (!isScreenfullFullscreen) {
+ onClose();
+ }
+ }
+ };
+
+ if (screenfull.isEnabled) {
+ try {
+ screenfull.request(ref.current);
+ setIsFullscreen(true);
+ } catch (error) {
+ onClose(error);
+ setIsFullscreen(false);
+ }
+ screenfull.on('change', onChange);
+ } else if (video && video.current && video.current.webkitEnterFullscreen) {
+ video.current.webkitEnterFullscreen();
+ on(video.current, 'webkitendfullscreen', onWebkitEndFullscreen);
+ setIsFullscreen(true);
+ } else {
+ onClose();
+ setIsFullscreen(false);
+ }
+
+ return () => {
+ setIsFullscreen(false);
+ if (screenfull.isEnabled) {
+ try {
+ screenfull.off('change', onChange);
+ screenfull.exit();
+ } catch {}
+ } else if (video && video.current && video.current.webkitExitFullscreen) {
+ off(video.current, 'webkitendfullscreen', onWebkitEndFullscreen);
+ video.current.webkitExitFullscreen();
+ }
+ };
+ }, [enabled, video, ref]);
+
+ return isFullscreen;
+};
+
+export default useFullscreen;
diff --git a/src/useGeolocation.ts b/src/useGeolocation.ts
index 4e5a0432bd..5c3f64c770 100644
--- a/src/useGeolocation.ts
+++ b/src/useGeolocation.ts
@@ -1,20 +1,33 @@
-import {useState, useEffect} from 'react';
+import { useEffect, useState } from 'react';
+
+/**
+ * @desc Made compatible with {GeolocationPositionError} and {PositionError} cause
+ * PositionError been renamed to GeolocationPositionError in typescript 4.1.x and making
+ * own compatible interface is most easiest way to avoid errors.
+ */
+export interface IGeolocationPositionError {
+ readonly code: number;
+ readonly message: string;
+ readonly PERMISSION_DENIED: number;
+ readonly POSITION_UNAVAILABLE: number;
+ readonly TIMEOUT: number;
+}
export interface GeoLocationSensorState {
- loading: boolean,
- accuracy: number,
- altitude: number,
- altitudeAccuracy: number,
- heading: number,
- latitude: number,
- longitude: number,
- speed: number,
- timestamp: number,
- error?: Error | PositionError
+ loading: boolean;
+ accuracy: number | null;
+ altitude: number | null;
+ altitudeAccuracy: number | null;
+ heading: number | null;
+ latitude: number | null;
+ longitude: number | null;
+ speed: number | null;
+ timestamp: number | null;
+ error?: Error | IGeolocationPositionError;
}
-const useGeolocation = () => {
- const [state, setState] = useState({
+const useGeolocation = (options?: PositionOptions): GeoLocationSensorState => {
+ const [state, setState] = useState({
loading: true,
accuracy: null,
altitude: null,
@@ -43,18 +56,18 @@ const useGeolocation = () => {
});
}
};
- const onEventError = (error: any) =>
- mounted && setState(oldState => ({...oldState, loading: false, error}));
+ const onEventError = (error: IGeolocationPositionError) =>
+ mounted && setState((oldState) => ({ ...oldState, loading: false, error }));
useEffect(() => {
- navigator.geolocation.getCurrentPosition(onEvent, onEventError);
- watchId = navigator.geolocation.watchPosition(onEvent, onEventError);
+ navigator.geolocation.getCurrentPosition(onEvent, onEventError, options);
+ watchId = navigator.geolocation.watchPosition(onEvent, onEventError, options);
return () => {
mounted = false;
navigator.geolocation.clearWatch(watchId);
};
- }, [0]);
+ }, []);
return state;
};
diff --git a/src/useGetSet.ts b/src/useGetSet.ts
index d3c8098f64..56a6b99af1 100644
--- a/src/useGetSet.ts
+++ b/src/useGetSet.ts
@@ -1,16 +1,21 @@
-import {useRef, useCallback} from 'react';
+import { Dispatch, useMemo, useRef } from 'react';
import useUpdate from './useUpdate';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState';
-const useGetSet = (initialValue: T): [() => T, (value: T) => void] => {
- let state = useRef(initialValue);
+export default function useGetSet(
+ initialState: IHookStateInitAction
+): [get: () => S, set: Dispatch>] {
+ const state = useRef(resolveHookState(initialState));
const update = useUpdate();
- const get = useCallback(() => state.current, []);
- const set = useCallback((value: T) => {
- state.current = value;
- update();
- }, []);
- return [get, set];
-};
-
-export default useGetSet;
+ return useMemo(
+ () => [
+ () => state.current as S,
+ (newState: IHookStateSetAction) => {
+ state.current = resolveHookState(newState, state.current);
+ update();
+ },
+ ],
+ []
+ );
+}
diff --git a/src/useGetSetState.ts b/src/useGetSetState.ts
index 0e0e9962d9..061c178b7e 100644
--- a/src/useGetSetState.ts
+++ b/src/useGetSetState.ts
@@ -1,21 +1,25 @@
-import {useRef, useCallback} from 'react';
+import { useCallback, useRef } from 'react';
import useUpdate from './useUpdate';
-const useGetSetState = (initialState: T = {} as T): [() => T, (patch: Partial) => void]=> {
+const useGetSetState = (
+ initialState: T = {} as T
+): [() => T, (patch: Partial) => void] => {
if (process.env.NODE_ENV !== 'production') {
if (typeof initialState !== 'object') {
- throw new TypeError('useGetSetState initial state must be an object.');
+ console.error('useGetSetState initial state must be an object.');
}
}
const update = useUpdate();
- const state = useRef({...(initialState as object)} as T);
+ const state = useRef({ ...(initialState as object) } as T);
const get = useCallback(() => state.current, []);
const set = useCallback((patch: Partial) => {
- if (!patch) return;
+ if (!patch) {
+ return;
+ }
if (process.env.NODE_ENV !== 'production') {
if (typeof patch !== 'object') {
- throw new TypeError('useGetSetState setter patch must be an object.');
+ console.error('useGetSetState setter patch must be an object.');
}
}
Object.assign(state.current, patch);
diff --git a/src/useHarmonicIntervalFn.ts b/src/useHarmonicIntervalFn.ts
new file mode 100644
index 0000000000..b95a9b6c3b
--- /dev/null
+++ b/src/useHarmonicIntervalFn.ts
@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+import { clearHarmonicInterval, setHarmonicInterval } from 'set-harmonic-interval';
+
+const useHarmonicIntervalFn = (fn: Function, delay: number | null = 0) => {
+ const latestCallback = useRef(() => {});
+
+ useEffect(() => {
+ latestCallback.current = fn;
+ });
+
+ useEffect(() => {
+ if (delay !== null) {
+ const interval = setHarmonicInterval(() => latestCallback.current(), delay);
+ return () => clearHarmonicInterval(interval);
+ }
+ return undefined;
+ }, [delay]);
+};
+
+export default useHarmonicIntervalFn;
diff --git a/src/useHash.ts b/src/useHash.ts
new file mode 100644
index 0000000000..6d936d333a
--- /dev/null
+++ b/src/useHash.ts
@@ -0,0 +1,34 @@
+import { useCallback, useState } from 'react';
+import useLifecycles from './useLifecycles';
+import { off, on } from './misc/util';
+
+/**
+ * read and write url hash, response to url hash change
+ */
+export const useHash = () => {
+ const [hash, setHash] = useState(() => window.location.hash);
+
+ const onHashChange = useCallback(() => {
+ setHash(window.location.hash);
+ }, []);
+
+ useLifecycles(
+ () => {
+ on(window, 'hashchange', onHashChange);
+ },
+ () => {
+ off(window, 'hashchange', onHashChange);
+ }
+ );
+
+ const _setHash = useCallback(
+ (newHash: string) => {
+ if (newHash !== hash) {
+ window.location.hash = newHash;
+ }
+ },
+ [hash]
+ );
+
+ return [hash, _setHash] as const;
+};
diff --git a/src/useHover.ts b/src/useHover.ts
index 06074c01ae..98b5908a8d 100644
--- a/src/useHover.ts
+++ b/src/useHover.ts
@@ -1,8 +1,7 @@
import * as React from 'react';
+import { noop } from './misc/util';
-const {useState} = React;
-
-const noop = () => {};
+const { useState } = React;
export type Element = ((state: boolean) => React.ReactElement) | React.ReactElement;
@@ -24,7 +23,7 @@ const useHover = (element: Element): [React.ReactElement, boolean] => {
const el = React.cloneElement(element, {
onMouseEnter: onMouseEnter(element.props.onMouseEnter),
- onMouseLeave: onMouseLeave(element.props.onMouseLeave)
+ onMouseLeave: onMouseLeave(element.props.onMouseLeave),
});
return [el, state];
diff --git a/src/useHoverDirty.ts b/src/useHoverDirty.ts
index e5df777d99..4f983a489a 100644
--- a/src/useHoverDirty.ts
+++ b/src/useHoverDirty.ts
@@ -1,10 +1,11 @@
-import {useEffect, useState} from 'react';
+import { RefObject, useEffect, useState } from 'react';
+import { off, on } from './misc/util';
// kudos: https://usehooks.com/
-const useHoverDirty = (ref) => {
- if (process.env.NODE_ENV !== 'production') {
- if ((typeof ref !== 'object') || (typeof ref.current === 'undefined')) {
- throw new TypeError('useHoverDirty expects a single ref argument.');
+const useHoverDirty = (ref: RefObject, enabled: boolean = true) => {
+ if (process.env.NODE_ENV === 'development') {
+ if (typeof ref !== 'object' || typeof ref.current === 'undefined') {
+ console.error('useHoverDirty expects a single ref argument.');
}
}
@@ -14,20 +15,23 @@ const useHoverDirty = (ref) => {
const onMouseOver = () => setValue(true);
const onMouseOut = () => setValue(false);
- if (ref && ref.current) {
- ref.current.addEventListener('mouseover', onMouseOver);
- ref.current.addEventListener('mouseout', onMouseOut);
+ if (enabled && ref && ref.current) {
+ on(ref.current, 'mouseover', onMouseOver);
+ on(ref.current, 'mouseout', onMouseOut);
}
+ // fixes react-hooks/exhaustive-deps warning about stale ref elements
+ const { current } = ref;
+
return () => {
- if (ref && ref.current) {
- ref.current.removeEventListener('mouseover', onMouseOver);
- ref.current.removeEventListener('mouseout', onMouseOut);
+ if (enabled && current) {
+ off(current, 'mouseover', onMouseOver);
+ off(current, 'mouseout', onMouseOut);
}
};
- }, []);
+ }, [enabled, ref]);
return value;
-}
+};
export default useHoverDirty;
diff --git a/src/useIdle.ts b/src/useIdle.ts
index ac58b10ec6..e5eb9a152f 100644
--- a/src/useIdle.ts
+++ b/src/useIdle.ts
@@ -1,11 +1,15 @@
-import {useState, useEffect} from 'react';
-import {on, off} from './util';
-import {throttle} from 'throttle-debounce';
+import { useEffect, useState } from 'react';
+import { throttle } from 'throttle-debounce';
+import { off, on } from './misc/util';
const defaultEvents = ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel'];
const oneMinute = 60e3;
-const useIdle = (ms: number = oneMinute, initialState: boolean = false, events: string[] = defaultEvents): boolean => {
+const useIdle = (
+ ms: number = oneMinute,
+ initialState: boolean = false,
+ events: string[] = defaultEvents
+): boolean => {
const [state, setState] = useState(initialState);
useEffect(() => {
@@ -28,7 +32,9 @@ const useIdle = (ms: number = oneMinute, initialState: boolean = false, events:
timeout = setTimeout(() => set(true), ms);
});
const onVisibility = () => {
- if (!document.hidden) onEvent();
+ if (!document.hidden) {
+ onEvent();
+ }
};
for (let i = 0; i < events.length; i++) {
@@ -46,7 +52,7 @@ const useIdle = (ms: number = oneMinute, initialState: boolean = false, events:
}
off(document, 'visibilitychange', onVisibility);
};
- }, events);
+ }, [ms, events]);
return state;
};
diff --git a/src/useIntersection.ts b/src/useIntersection.ts
new file mode 100644
index 0000000000..f5b833649d
--- /dev/null
+++ b/src/useIntersection.ts
@@ -0,0 +1,30 @@
+import { RefObject, useEffect, useState } from 'react';
+
+const useIntersection = (
+ ref: RefObject,
+ options: IntersectionObserverInit
+): IntersectionObserverEntry | null => {
+ const [intersectionObserverEntry, setIntersectionObserverEntry] =
+ useState(null);
+
+ useEffect(() => {
+ if (ref.current && typeof IntersectionObserver === 'function') {
+ const handler = (entries: IntersectionObserverEntry[]) => {
+ setIntersectionObserverEntry(entries[0]);
+ };
+
+ const observer = new IntersectionObserver(handler, options);
+ observer.observe(ref.current);
+
+ return () => {
+ setIntersectionObserverEntry(null);
+ observer.disconnect();
+ };
+ }
+ return () => {};
+ }, [ref.current, options.threshold, options.root, options.rootMargin]);
+
+ return intersectionObserverEntry;
+};
+
+export default useIntersection;
diff --git a/src/useInterval.ts b/src/useInterval.ts
new file mode 100644
index 0000000000..4613d5e9ef
--- /dev/null
+++ b/src/useInterval.ts
@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+const useInterval = (callback: Function, delay?: number | null) => {
+ const savedCallback = useRef(() => {});
+
+ useEffect(() => {
+ savedCallback.current = callback;
+ });
+
+ useEffect(() => {
+ if (delay !== null) {
+ const interval = setInterval(() => savedCallback.current(), delay || 0);
+ return () => clearInterval(interval);
+ }
+
+ return undefined;
+ }, [delay]);
+};
+
+export default useInterval;
diff --git a/src/useIsomorphicLayoutEffect.ts b/src/useIsomorphicLayoutEffect.ts
new file mode 100644
index 0000000000..71f7c3423a
--- /dev/null
+++ b/src/useIsomorphicLayoutEffect.ts
@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from 'react';
+import { isBrowser } from './misc/util';
+
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+
+export default useIsomorphicLayoutEffect;
diff --git a/src/useKey.ts b/src/useKey.ts
new file mode 100644
index 0000000000..03f403bf24
--- /dev/null
+++ b/src/useKey.ts
@@ -0,0 +1,43 @@
+import { DependencyList, useMemo } from 'react';
+import useEvent, { UseEventOptions, UseEventTarget } from './useEvent';
+import { noop } from './misc/util';
+
+export type KeyPredicate = (event: KeyboardEvent) => boolean;
+export type KeyFilter = null | undefined | string | ((event: KeyboardEvent) => boolean);
+export type Handler = (event: KeyboardEvent) => void;
+
+export interface UseKeyOptions {
+ event?: 'keydown' | 'keypress' | 'keyup';
+ target?: T | null;
+ options?: UseEventOptions;
+}
+
+const createKeyPredicate = (keyFilter: KeyFilter): KeyPredicate =>
+ typeof keyFilter === 'function'
+ ? keyFilter
+ : typeof keyFilter === 'string'
+ ? (event: KeyboardEvent) => event.key === keyFilter
+ : keyFilter
+ ? () => true
+ : () => false;
+
+const useKey = (
+ key: KeyFilter,
+ fn: Handler = noop,
+ opts: UseKeyOptions = {},
+ deps: DependencyList = [key]
+) => {
+ const { event = 'keydown', target, options } = opts;
+ const useMemoHandler = useMemo(() => {
+ const predicate: KeyPredicate = createKeyPredicate(key);
+ const handler: Handler = (handlerEvent) => {
+ if (predicate(handlerEvent)) {
+ return fn(handlerEvent);
+ }
+ };
+ return handler;
+ }, deps);
+ useEvent(event, useMemoHandler, target, options);
+};
+
+export default useKey;
diff --git a/src/useKeyPress.ts b/src/useKeyPress.ts
index 958c643dd6..2f48e0fb31 100644
--- a/src/useKeyPress.ts
+++ b/src/useKeyPress.ts
@@ -1,63 +1,10 @@
-import * as React from "react";
-const { useState, useEffect } = React;
-
-interface Options {
- useKeyboardJS: boolean;
-}
-
-const defaults: Options = {
- useKeyboardJS: false
-};
-
-const useKeyPress = (targetKey: string, config: Options = defaults) => {
- const [state, setState] = useState(false);
- const [keyboardjs, setKeyboardJs] = useState(null);
- const {useKeyboardJS} = config;
-
- if (useKeyboardJS) {
- import("keyboardjs").then(setKeyboardJs);
- }
-
- const regularDownHandler = ({ key }: KeyboardEvent) => {
- if (key === targetKey) {
- setState(true);
- }
- };
-
- const regularUpHandler = ({ key }: KeyboardEvent) => {
- if (key === targetKey) {
- setState(false);
- }
- };
-
- const customDownHandler = () => {
- setState(true);
- };
- const customUpHandler = () => {
- setState(false);
- };
-
- useEffect(() => {
- if (useKeyboardJS) {
- if (keyboardjs) {
- keyboardjs.bind(targetKey, customDownHandler, customUpHandler);
- }
- } else {
- window.addEventListener("keydown", regularDownHandler);
- window.addEventListener("keyup", regularUpHandler);
- }
- return () => {
- if (useKeyboardJS) {
- if (keyboardjs) {
- keyboardjs.unbind(targetKey, customDownHandler, customUpHandler);
- }
- } else {
- window.removeEventListener("keydown", regularDownHandler);
- window.removeEventListener("keyup", regularUpHandler);
- }
- };
- }, [targetKey, useKeyPress, keyboardjs]);
+import { useState } from 'react';
+import useKey, { KeyFilter } from './useKey';
+const useKeyPress = (keyFilter: KeyFilter) => {
+ const [state, set] = useState<[boolean, null | KeyboardEvent]>([false, null]);
+ useKey(keyFilter, (event) => set([true, event]), { event: 'keydown' }, [state]);
+ useKey(keyFilter, (event) => set([false, event]), { event: 'keyup' }, [state]);
return state;
};
diff --git a/src/useKeyPressEvent.ts b/src/useKeyPressEvent.ts
new file mode 100644
index 0000000000..9b694b6077
--- /dev/null
+++ b/src/useKeyPressEvent.ts
@@ -0,0 +1,21 @@
+import { Handler, KeyFilter } from './useKey';
+import useKeyPressDefault from './useKeyPress';
+import useUpdateEffect from './useUpdateEffect';
+
+const useKeyPressEvent = (
+ key: string | KeyFilter,
+ keydown?: Handler | null | undefined,
+ keyup?: Handler | null | undefined,
+ useKeyPress = useKeyPressDefault
+) => {
+ const [pressed, event] = useKeyPress(key);
+ useUpdateEffect(() => {
+ if (!pressed && keyup) {
+ keyup(event!);
+ } else if (pressed && keydown) {
+ keydown(event!);
+ }
+ }, [pressed]);
+};
+
+export default useKeyPressEvent;
diff --git a/src/useKeyboardJs.ts b/src/useKeyboardJs.ts
new file mode 100644
index 0000000000..bdf13564e0
--- /dev/null
+++ b/src/useKeyboardJs.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import useMount from './useMount';
+
+const useKeyboardJs = (combination: string | string[]) => {
+ const [state, set] = useState<[boolean, null | KeyboardEvent]>([false, null]);
+ const [keyboardJs, setKeyboardJs] = useState(null);
+
+ useMount(() => {
+ import('keyboardjs').then((k) => setKeyboardJs(k.default || k));
+ });
+
+ useEffect(() => {
+ if (!keyboardJs) {
+ return;
+ }
+
+ const down = (event) => set([true, event]);
+ const up = (event) => set([false, event]);
+ keyboardJs.bind(combination, down, up, true);
+
+ return () => {
+ keyboardJs.unbind(combination, down, up);
+ };
+ }, [combination, keyboardJs]);
+
+ return state;
+};
+
+export default useKeyboardJs;
diff --git a/src/useLatest.ts b/src/useLatest.ts
new file mode 100644
index 0000000000..cd4230d25c
--- /dev/null
+++ b/src/useLatest.ts
@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+
+const useLatest = (value: T): { readonly current: T } => {
+ const ref = useRef(value);
+ ref.current = value;
+ return ref;
+};
+
+export default useLatest;
diff --git a/src/useLifecycles.ts b/src/useLifecycles.ts
index 6db12d739b..45a994298a 100644
--- a/src/useLifecycles.ts
+++ b/src/useLifecycles.ts
@@ -1,10 +1,14 @@
-import {useEffect} from 'react';
+import { useEffect } from 'react';
const useLifecycles = (mount, unmount?) => {
useEffect(() => {
- if (mount) mount();
+ if (mount) {
+ mount();
+ }
return () => {
- if (unmount) unmount();
+ if (unmount) {
+ unmount();
+ }
};
}, []);
};
diff --git a/src/useList.ts b/src/useList.ts
index 6658a3c0a2..dd592df30d 100644
--- a/src/useList.ts
+++ b/src/useList.ts
@@ -1,31 +1,157 @@
-import {useState} from 'react';
+import { useMemo, useRef } from 'react';
+import useUpdate from './useUpdate';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState';
-export interface Actions {
- set: (list: T[]) => void;
+export interface ListActions {
+ /**
+ * @description Set new list instead old one
+ */
+ set: (newList: IHookStateSetAction) => void;
+ /**
+ * @description Add item(s) at the end of list
+ */
+ push: (...items: T[]) => void;
+
+ /**
+ * @description Replace item at given position. If item at given position not exists it will be set.
+ */
updateAt: (index: number, item: T) => void;
- push: (item: T) => void;
- filter: (fn: (value: T) => boolean) => void;
- sort: (fn?: (a: T, b: T) => number) => void;
+ /**
+ * @description Insert item at given position, all items to the right will be shifted.
+ */
+ insertAt: (index: number, item: T) => void;
+
+ /**
+ * @description Replace all items that matches predicate with given one.
+ */
+ update: (predicate: (a: T, b: T) => boolean, newItem: T) => void;
+ /**
+ * @description Replace first item matching predicate with given one.
+ */
+ updateFirst: (predicate: (a: T, b: T) => boolean, newItem: T) => void;
+ /**
+ * @description Like `updateFirst` bit in case of predicate miss - pushes item to the list
+ */
+ upsert: (predicate: (a: T, b: T) => boolean, newItem: T) => void;
+
+ /**
+ * @description Sort list with given sorting function
+ */
+ sort: (compareFn?: (a: T, b: T) => number) => void;
+ /**
+ * @description Same as native Array's method
+ */
+ filter: (callbackFn: (value: T, index?: number, array?: T[]) => boolean, thisArg?: any) => void;
+
+ /**
+ * @description Removes item at given position. All items to the right from removed will be shifted.
+ */
+ removeAt: (index: number) => void;
+ /**
+ * @deprecated Use removeAt method instead
+ */
+ remove: (index: number) => void;
+
+ /**
+ * @description Make the list empty
+ */
+ clear: () => void;
+ /**
+ * @description Reset list to initial value
+ */
+ reset: () => void;
}
-const useList = (initialList: T[] = []): [T[], Actions] => {
- const [list, set] = useState(initialList);
-
- return [list, {
- set,
- updateAt: (index, entry) => set([
- ...list.slice(0, index),
- entry,
- ...list.slice(index + 1)
- ]),
- remove: (index) => set([
- ...list.slice(0, index),
- ...list.slice(index + 1)
- ]),
- push: (entry) => set([...list, entry]),
- filter: (fn) => set(list.filter(fn)),
- sort: (fn?) => set([...list].sort(fn)),
- }];
-};
+function useList(initialList: IHookStateInitAction = []): [T[], ListActions] {
+ const list = useRef(resolveHookState(initialList));
+ const update = useUpdate();
+
+ const actions = useMemo>(() => {
+ const a = {
+ set: (newList: IHookStateSetAction) => {
+ list.current = resolveHookState(newList, list.current);
+ update();
+ },
+
+ push: (...items: T[]) => {
+ items.length && actions.set((curr: T[]) => curr.concat(items));
+ },
+
+ updateAt: (index: number, item: T) => {
+ actions.set((curr: T[]) => {
+ const arr = curr.slice();
+
+ arr[index] = item;
+
+ return arr;
+ });
+ },
+
+ insertAt: (index: number, item: T) => {
+ actions.set((curr: T[]) => {
+ const arr = curr.slice();
+
+ index > arr.length ? (arr[index] = item) : arr.splice(index, 0, item);
+
+ return arr;
+ });
+ },
+
+ update: (predicate: (a: T, b: T) => boolean, newItem: T) => {
+ actions.set((curr: T[]) => curr.map((item) => (predicate(item, newItem) ? newItem : item)));
+ },
+
+ updateFirst: (predicate: (a: T, b: T) => boolean, newItem: T) => {
+ const index = list.current.findIndex((item) => predicate(item, newItem));
+
+ index >= 0 && actions.updateAt(index, newItem);
+ },
+
+ upsert: (predicate: (a: T, b: T) => boolean, newItem: T) => {
+ const index = list.current.findIndex((item) => predicate(item, newItem));
+
+ index >= 0 ? actions.updateAt(index, newItem) : actions.push(newItem);
+ },
+
+ sort: (compareFn?: (a: T, b: T) => number) => {
+ actions.set((curr: T[]) => curr.slice().sort(compareFn));
+ },
+
+ filter: (
+ callbackFn: (value: T, index: number, array: T[]) => value is S,
+ thisArg?: any
+ ) => {
+ actions.set((curr: T[]) => curr.slice().filter(callbackFn, thisArg));
+ },
+
+ removeAt: (index: number) => {
+ actions.set((curr: T[]) => {
+ const arr = curr.slice();
+
+ arr.splice(index, 1);
+
+ return arr;
+ });
+ },
+
+ clear: () => {
+ actions.set([]);
+ },
+
+ reset: () => {
+ actions.set(resolveHookState(initialList).slice());
+ },
+ };
+
+ /**
+ * @deprecated Use removeAt method instead
+ */
+ (a as ListActions).remove = a.removeAt;
+
+ return a as ListActions;
+ }, []);
+
+ return [list.current, actions];
+}
export default useList;
diff --git a/src/useLocalStorage.ts b/src/useLocalStorage.ts
index 7d05e04c04..def6ad804a 100644
--- a/src/useLocalStorage.ts
+++ b/src/useLocalStorage.ts
@@ -1,40 +1,99 @@
-import {useState, useEffect} from 'react';
+import { Dispatch, SetStateAction, useCallback, useState, useRef, useLayoutEffect } from 'react';
+import { isBrowser, noop } from './misc/util';
-const isClient = typeof window === 'object';
+type parserOptions =
+ | {
+ raw: true;
+ }
+ | {
+ raw: false;
+ serializer: (value: T) => string;
+ deserializer: (value: string) => T;
+ };
-const useLocalStorage = (key: string, initialValue?: T, raw?: boolean): [T, (value: T) => void] => {
- if (!isClient) {
- return [initialValue as T, () => {}];
+const useLocalStorage = (
+ key: string,
+ initialValue?: T,
+ options?: parserOptions
+): [T | undefined, Dispatch>, () => void] => {
+ if (!isBrowser) {
+ return [initialValue as T, noop, noop];
+ }
+ if (!key) {
+ throw new Error('useLocalStorage key may not be falsy');
}
- const [state, setState] = useState(() => {
+ const deserializer = options
+ ? options.raw
+ ? (value) => value
+ : options.deserializer
+ : JSON.parse;
+
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const initializer = useRef((key: string) => {
try {
+ const serializer = options ? (options.raw ? String : options.serializer) : JSON.stringify;
+
const localStorageValue = localStorage.getItem(key);
- if (typeof localStorageValue !== 'string') {
- localStorage.setItem(key, raw ? String(initialValue) : JSON.stringify(initialValue));
- return initialValue;
+ if (localStorageValue !== null) {
+ return deserializer(localStorageValue);
} else {
- return raw ? localStorageValue : JSON.parse(localStorageValue || 'null');
+ initialValue && localStorage.setItem(key, serializer(initialValue));
+ return initialValue;
}
} catch {
// If user is in private mode or has storage restriction
// localStorage can throw. JSON.parse and JSON.stringify
- // cat throw, too.
+ // can throw, too.
return initialValue;
}
});
- useEffect(() => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const [state, setState] = useState(() => initializer.current(key));
+
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ useLayoutEffect(() => setState(initializer.current(key)), [key]);
+
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const set: Dispatch> = useCallback(
+ (valOrFunc) => {
+ try {
+ const newState =
+ typeof valOrFunc === 'function' ? (valOrFunc as Function)(state) : valOrFunc;
+ if (typeof newState === 'undefined') return;
+ let value: string;
+
+ if (options)
+ if (options.raw)
+ if (typeof newState === 'string') value = newState;
+ else value = JSON.stringify(newState);
+ else if (options.serializer) value = options.serializer(newState);
+ else value = JSON.stringify(newState);
+ else value = JSON.stringify(newState);
+
+ localStorage.setItem(key, value);
+ setState(deserializer(value));
+ } catch {
+ // If user is in private mode or has storage restriction
+ // localStorage can throw. Also JSON.stringify can throw.
+ }
+ },
+ [key, setState]
+ );
+
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const remove = useCallback(() => {
try {
- const serializedState = raw ? String(state) : JSON.stringify(state);
- localStorage.setItem(key, serializedState);
+ localStorage.removeItem(key);
+ setState(undefined);
} catch {
// If user is in private mode or has storage restriction
- // localStorage can throw. Also JSON.stringify can throw.
+ // localStorage can throw.
}
- });
+ }, [key, setState]);
- return [state, setState];
+ return [state, set, remove];
};
export default useLocalStorage;
diff --git a/src/useLocation.ts b/src/useLocation.ts
index 9c2d242fb1..bffdca20b0 100644
--- a/src/useLocation.ts
+++ b/src/useLocation.ts
@@ -1,7 +1,8 @@
-import {useState, useEffect} from 'react';
-import {isClient, on, off} from './util';
+import { useEffect, useState } from 'react';
+import { isBrowser, off, on } from './misc/util';
const patchHistoryMethod = (method) => {
+ const history = window.history;
const original = history[method];
history[method] = function (state) {
@@ -16,7 +17,7 @@ const patchHistoryMethod = (method) => {
};
};
-if (isClient) {
+if (isBrowser) {
patchHistoryMethod('pushState');
patchHistoryMethod('replaceState');
}
@@ -36,57 +37,40 @@ export interface LocationSensorState {
search?: string;
}
-const useLocation = (): LocationSensorState => {
- const buildState = (trigger: string) => {
- const {
- state,
- length
- } = history;
-
- const {
- hash,
- host,
- hostname,
- href,
- origin,
- pathname,
- port,
- protocol,
- search
- } = location;
-
- return {
- trigger,
- state,
- length,
- hash,
- host,
- hostname,
- href,
- origin,
- pathname,
- port,
- protocol,
- search
- };
+const useLocationServer = (): LocationSensorState => ({
+ trigger: 'load',
+ length: 1,
+});
+
+const buildState = (trigger: string) => {
+ const { state, length } = window.history;
+
+ const { hash, host, hostname, href, origin, pathname, port, protocol, search } = window.location;
+
+ return {
+ trigger,
+ state,
+ length,
+ hash,
+ host,
+ hostname,
+ href,
+ origin,
+ pathname,
+ port,
+ protocol,
+ search,
};
+};
- const [state, setState] = useState(isClient
- ? buildState('load')
- : {
- trigger: 'load',
- length: 1
- }
- );
-
- const onChange = (trigger: string) =>
- setState(buildState(trigger));
-
- const onPopstate = () => onChange('popstate');
- const onPushstate = () => onChange('pushstate');
- const onReplacestate = () => onChange('replacestate');
+const useLocationBrowser = (): LocationSensorState => {
+ const [state, setState] = useState(buildState('load'));
useEffect(() => {
+ const onPopstate = () => setState(buildState('popstate'));
+ const onPushstate = () => setState(buildState('pushstate'));
+ const onReplacestate = () => setState(buildState('replacestate'));
+
on(window, 'popstate', onPopstate);
on(window, 'pushstate', onPushstate);
on(window, 'replacestate', onReplacestate);
@@ -96,9 +80,11 @@ const useLocation = (): LocationSensorState => {
off(window, 'pushstate', onPushstate);
off(window, 'replacestate', onReplacestate);
};
- }, [0]);
+ }, []);
return state;
};
-export default useLocation;
+const hasEventConstructor = typeof Event === 'function';
+
+export default isBrowser && hasEventConstructor ? useLocationBrowser : useLocationServer;
diff --git a/src/useLockBodyScroll.ts b/src/useLockBodyScroll.ts
new file mode 100644
index 0000000000..fd48658917
--- /dev/null
+++ b/src/useLockBodyScroll.ts
@@ -0,0 +1,121 @@
+import { RefObject, useEffect, useRef } from 'react';
+import { isBrowser, off, on } from './misc/util';
+
+export function getClosestBody(
+ el: Element | HTMLElement | HTMLIFrameElement | null
+): HTMLElement | null {
+ if (!el) {
+ return null;
+ } else if (el.tagName === 'BODY') {
+ return el as HTMLElement;
+ } else if (el.tagName === 'IFRAME') {
+ const document = (el as HTMLIFrameElement).contentDocument;
+ return document ? document.body : null;
+ } else if (!(el as HTMLElement).offsetParent) {
+ return null;
+ }
+
+ return getClosestBody((el as HTMLElement).offsetParent!);
+}
+
+function preventDefault(rawEvent: TouchEvent): boolean {
+ const e = rawEvent || window.event;
+ // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+ if (e.touches.length > 1) return true;
+
+ if (e.preventDefault) e.preventDefault();
+
+ return false;
+}
+
+export interface BodyInfoItem {
+ counter: number;
+ initialOverflow: CSSStyleDeclaration['overflow'];
+}
+
+const isIosDevice =
+ isBrowser &&
+ window.navigator &&
+ window.navigator.platform &&
+ /iP(ad|hone|od)/.test(window.navigator.platform);
+
+const bodies: Map = new Map();
+
+const doc: Document | undefined = typeof document === 'object' ? document : undefined;
+
+let documentListenerAdded = false;
+
+export default !doc
+ ? function useLockBodyMock(_locked: boolean = true, _elementRef?: RefObject) {}
+ : function useLockBody(locked: boolean = true, elementRef?: RefObject) {
+ const bodyRef = useRef(doc!.body);
+ elementRef = elementRef || bodyRef;
+
+ const lock = (body) => {
+ const bodyInfo = bodies.get(body);
+ if (!bodyInfo) {
+ bodies.set(body, { counter: 1, initialOverflow: body.style.overflow });
+ if (isIosDevice) {
+ if (!documentListenerAdded) {
+ on(document, 'touchmove', preventDefault, { passive: false });
+
+ documentListenerAdded = true;
+ }
+ } else {
+ body.style.overflow = 'hidden';
+ }
+ } else {
+ bodies.set(body, {
+ counter: bodyInfo.counter + 1,
+ initialOverflow: bodyInfo.initialOverflow,
+ });
+ }
+ };
+
+ const unlock = (body) => {
+ const bodyInfo = bodies.get(body);
+ if (bodyInfo) {
+ if (bodyInfo.counter === 1) {
+ bodies.delete(body);
+ if (isIosDevice) {
+ body.ontouchmove = null;
+
+ if (documentListenerAdded) {
+ off(document, 'touchmove', preventDefault);
+ documentListenerAdded = false;
+ }
+ } else {
+ body.style.overflow = bodyInfo.initialOverflow;
+ }
+ } else {
+ bodies.set(body, {
+ counter: bodyInfo.counter - 1,
+ initialOverflow: bodyInfo.initialOverflow,
+ });
+ }
+ }
+ };
+
+ useEffect(() => {
+ const body = getClosestBody(elementRef!.current);
+ if (!body) {
+ return;
+ }
+ if (locked) {
+ lock(body);
+ } else {
+ unlock(body);
+ }
+ }, [locked, elementRef.current]);
+
+ // clean up, on un-mount
+ useEffect(() => {
+ const body = getClosestBody(elementRef!.current);
+ if (!body) {
+ return;
+ }
+ return () => {
+ unlock(body);
+ };
+ }, []);
+ };
diff --git a/src/useLogger.ts b/src/useLogger.ts
index b23ab72471..6ae5a8c5f8 100644
--- a/src/useLogger.ts
+++ b/src/useLogger.ts
@@ -1,10 +1,14 @@
-import {useEffect} from 'react';
-import useLifecycles from './useLifecycles';
+import useEffectOnce from './useEffectOnce';
+import useUpdateEffect from './useUpdateEffect';
-const useLogger = (name, props) => {
- useLifecycles(() => console.log(`${name} mounted`), () => console.log(`${name} un-mounted`));
- useEffect(() => {
- console.log(`${name} props updated`, props);
+const useLogger = (componentName: string, ...rest) => {
+ useEffectOnce(() => {
+ console.log(`${componentName} mounted`, ...rest);
+ return () => console.log(`${componentName} unmounted`);
+ });
+
+ useUpdateEffect(() => {
+ console.log(`${componentName} updated`, ...rest);
});
};
diff --git a/src/useLongPress.ts b/src/useLongPress.ts
new file mode 100644
index 0000000000..a885e091f5
--- /dev/null
+++ b/src/useLongPress.ts
@@ -0,0 +1,58 @@
+import { useCallback, useRef } from 'react';
+import { off, on } from './misc/util';
+
+interface Options {
+ isPreventDefault?: boolean;
+ delay?: number;
+}
+
+const isTouchEvent = (ev: Event): ev is TouchEvent => {
+ return 'touches' in ev;
+};
+
+const preventDefault = (ev: Event) => {
+ if (!isTouchEvent(ev)) return;
+
+ if (ev.touches.length < 2 && ev.preventDefault) {
+ ev.preventDefault();
+ }
+};
+
+const useLongPress = (
+ callback: (e: TouchEvent | MouseEvent) => void,
+ { isPreventDefault = true, delay = 300 }: Options = {}
+) => {
+ const timeout = useRef>();
+ const target = useRef();
+
+ const start = useCallback(
+ (event: TouchEvent | MouseEvent) => {
+ // prevent ghost click on mobile devices
+ if (isPreventDefault && event.target) {
+ on(event.target, 'touchend', preventDefault, { passive: false });
+ target.current = event.target;
+ }
+ timeout.current = setTimeout(() => callback(event), delay);
+ },
+ [callback, delay, isPreventDefault]
+ );
+
+ const clear = useCallback(() => {
+ // clearTimeout and removeEventListener
+ timeout.current && clearTimeout(timeout.current);
+
+ if (isPreventDefault && target.current) {
+ off(target.current, 'touchend', preventDefault);
+ }
+ }, [isPreventDefault]);
+
+ return {
+ onMouseDown: (e: any) => start(e),
+ onTouchStart: (e: any) => start(e),
+ onMouseUp: clear,
+ onMouseLeave: clear,
+ onTouchEnd: clear,
+ } as const;
+};
+
+export default useLongPress;
diff --git a/src/useMap.ts b/src/useMap.ts
index 01bad6e3f2..ded74ed239 100644
--- a/src/useMap.ts
+++ b/src/useMap.ts
@@ -1,27 +1,47 @@
-import {useState} from 'react';
+import { useCallback, useMemo, useState } from 'react';
-export interface Actions {
- get: (key: K) => any;
- set: (key: K, value: V) => void;
- remove: (key: K) => void;
+export interface StableActions {
+ set: (key: K, value: T[K]) => void;
+ setAll: (newMap: T) => void;
+ remove: (key: K) => void;
reset: () => void;
}
-const useMap = (initialMap: any = {}): [T, Actions] => {
- const [map, set] = useState(initialMap as any);
+export interface Actions extends StableActions {
+ get: (key: K) => T[K];
+}
+
+const useMap = (initialMap: T = {} as T): [T, Actions] => {
+ const [map, set] = useState(initialMap);
- return [map, {
- get: (key: string) => map[key],
- set: (key: string, entry: any) => set({
- ...(map as any),
- [key]: entry,
+ const stableActions = useMemo>(
+ () => ({
+ set: (key, entry) => {
+ set((prevMap) => ({
+ ...prevMap,
+ [key]: entry,
+ }));
+ },
+ setAll: (newMap: T) => {
+ set(newMap);
+ },
+ remove: (key) => {
+ set((prevMap) => {
+ const { [key]: omit, ...rest } = prevMap;
+ return rest as T;
+ });
+ },
+ reset: () => set(initialMap),
}),
- remove: (key: string) => {
- const {[key]: omit, ...rest} = map as any;
- set(rest);
- },
- reset: () => set(initialMap),
- }];
+ [set]
+ );
+
+ const utils = {
+ get: useCallback((key) => map[key], [map]),
+ ...stableActions,
+ } as Actions;
+
+ return [map, utils];
};
export default useMap;
diff --git a/src/useMeasure.ts b/src/useMeasure.ts
new file mode 100644
index 0000000000..e14f217f1c
--- /dev/null
+++ b/src/useMeasure.ts
@@ -0,0 +1,51 @@
+import { useMemo, useState } from 'react';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+import { isBrowser, noop } from './misc/util';
+
+export type UseMeasureRect = Pick<
+ DOMRectReadOnly,
+ 'x' | 'y' | 'top' | 'left' | 'right' | 'bottom' | 'height' | 'width'
+>;
+export type UseMeasureRef = (element: E) => void;
+export type UseMeasureResult = [UseMeasureRef, UseMeasureRect];
+
+const defaultState: UseMeasureRect = {
+ x: 0,
+ y: 0,
+ width: 0,
+ height: 0,
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0,
+};
+
+function useMeasure(): UseMeasureResult {
+ const [element, ref] = useState(null);
+ const [rect, setRect] = useState(defaultState);
+
+ const observer = useMemo(
+ () =>
+ new (window as any).ResizeObserver((entries) => {
+ if (entries[0]) {
+ const { x, y, width, height, top, left, bottom, right } = entries[0].contentRect;
+ setRect({ x, y, width, height, top, left, bottom, right });
+ }
+ }),
+ []
+ );
+
+ useIsomorphicLayoutEffect(() => {
+ if (!element) return;
+ observer.observe(element);
+ return () => {
+ observer.disconnect();
+ };
+ }, [element]);
+
+ return [ref, rect];
+}
+
+export default isBrowser && typeof (window as any).ResizeObserver !== 'undefined'
+ ? useMeasure
+ : ((() => [noop, defaultState]) as typeof useMeasure);
diff --git a/src/useMeasureDirty.ts b/src/useMeasureDirty.ts
new file mode 100644
index 0000000000..4d5ca794ec
--- /dev/null
+++ b/src/useMeasureDirty.ts
@@ -0,0 +1,52 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export interface ContentRect {
+ width: number;
+ height: number;
+ top: number;
+ right: number;
+ left: number;
+ bottom: number;
+}
+
+const useMeasureDirty = (ref: RefObject): ContentRect => {
+ const frame = useRef(0);
+ const [rect, set] = useState({
+ width: 0,
+ height: 0,
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ });
+
+ const [observer] = useState(
+ () =>
+ new ResizeObserver((entries) => {
+ const entry = entries[0];
+
+ if (entry) {
+ cancelAnimationFrame(frame.current);
+
+ frame.current = requestAnimationFrame(() => {
+ if (ref.current) {
+ set(entry.contentRect);
+ }
+ });
+ }
+ })
+ );
+
+ useEffect(() => {
+ observer.disconnect();
+
+ if (ref.current) {
+ observer.observe(ref.current);
+ }
+ }, [ref]);
+
+ return rect;
+};
+
+export default useMeasureDirty;
diff --git a/src/useMedia.ts b/src/useMedia.ts
index 12e2331a09..c0f3d96281 100644
--- a/src/useMedia.ts
+++ b/src/useMedia.ts
@@ -1,22 +1,45 @@
-import {useState, useEffect} from 'react';
+import { useEffect, useState } from 'react';
+import { isBrowser } from './misc/util';
-const useMedia = (query: string, defaultState: boolean = false) => {
- const [state, setState] = useState(defaultState);
+const getInitialState = (query: string, defaultState?: boolean) => {
+ // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+ if (defaultState !== undefined) {
+ return defaultState;
+ }
+
+ if (isBrowser) {
+ return window.matchMedia(query).matches;
+ }
+
+ // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+ if (process.env.NODE_ENV !== 'production') {
+ console.warn(
+ '`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.'
+ );
+ }
+
+ return false;
+};
+
+const useMedia = (query: string, defaultState?: boolean) => {
+ const [state, setState] = useState(getInitialState(query, defaultState));
useEffect(() => {
let mounted = true;
const mql = window.matchMedia(query);
const onChange = () => {
- if (!mounted) return;
+ if (!mounted) {
+ return;
+ }
setState(!!mql.matches);
};
- mql.addListener(onChange);
+ mql.addEventListener('change', onChange);
setState(mql.matches);
return () => {
mounted = false;
- mql.removeListener(onChange);
+ mql.removeEventListener('change', onChange);
};
}, [query]);
diff --git a/src/useMediaDevices.ts b/src/useMediaDevices.ts
index c69f14d077..50dc53b297 100644
--- a/src/useMediaDevices.ts
+++ b/src/useMediaDevices.ts
@@ -1,7 +1,5 @@
-import {useState, useEffect} from 'react';
-import {on, off} from './util';
-
-const noop = () => {};
+import { useEffect, useState } from 'react';
+import { isNavigator, noop, off, on } from './misc/util';
const useMediaDevices = () => {
const [state, setState] = useState({});
@@ -10,17 +8,21 @@ const useMediaDevices = () => {
let mounted = true;
const onChange = () => {
- navigator.mediaDevices.enumerateDevices()
+ navigator.mediaDevices
+ .enumerateDevices()
.then((devices) => {
if (mounted) {
setState({
- devices: devices.map(({deviceId, groupId, kind, label}) =>
- ({deviceId, groupId, kind, label})
- )
- });
- }
- })
- .catch(noop);
+ devices: devices.map(({ deviceId, groupId, kind, label }) => ({
+ deviceId,
+ groupId,
+ kind,
+ label,
+ })),
+ });
+ }
+ })
+ .catch(noop);
};
on(navigator.mediaDevices, 'devicechange', onChange);
@@ -30,9 +32,11 @@ const useMediaDevices = () => {
mounted = false;
off(navigator.mediaDevices, 'devicechange', onChange);
};
- }, [0]);
+ }, []);
return state;
};
-export default useMediaDevices;
+const useMediaDevicesMock = () => ({});
+
+export default isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
diff --git a/src/useMediatedState.ts b/src/useMediatedState.ts
new file mode 100644
index 0000000000..6dbb7a4cb1
--- /dev/null
+++ b/src/useMediatedState.ts
@@ -0,0 +1,38 @@
+import { Dispatch, SetStateAction, useCallback, useRef, useState } from 'react';
+
+export interface StateMediator {
+ (newState: any): S;
+
+ (newState: any, dispatch: Dispatch>): void;
+}
+
+export type UseMediatedStateReturn = [S, Dispatch>];
+
+export function useMediatedState(
+ mediator: StateMediator
+): UseMediatedStateReturn;
+export function useMediatedState(
+ mediator: StateMediator,
+ initialState: S
+): UseMediatedStateReturn
+ 
+
+
+ 
+
+
+ 
+
+
+
+