@react-hookz/web
Version:
React hooks done right, for browser and SSR.
38 lines (37 loc) • 1.88 kB
JavaScript
import { useCallback } from 'react';
import { useSafeState, useSyncedRef } from '..';
import { resolveHookState } from "../util/resolveHookState.js";
/**
* Like `useSafeState`, but can only become `true` or `false`.
*
* State setter, in case called without arguments, will change the state to opposite. React
* synthetic events are ignored by default so state setter can be used as event handler directly,
* such behaviour can be changed by setting 2nd parameter to `false`.
*/
export function useToggle(initialState, ignoreReactEvents) {
if (initialState === void 0) { initialState = false; }
if (ignoreReactEvents === void 0) { ignoreReactEvents = true; }
// We don't use useReducer (which would end up with less code), because exposed
// action does not provide functional updates feature.
// Therefore, we have to create and expose our own state setter with
// toggle logic.
var _a = useSafeState(initialState), state = _a[0], setState = _a[1];
var ignoreReactEventsRef = useSyncedRef(ignoreReactEvents);
return [
state,
useCallback(function (nextState) {
setState(function (prevState) {
if (typeof nextState === 'undefined' ||
(ignoreReactEventsRef.current &&
typeof nextState === 'object' &&
(nextState.constructor.name === 'SyntheticBaseEvent' ||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,no-underscore-dangle,@typescript-eslint/no-explicit-any
typeof nextState._reactName === 'string'))) {
return !prevState;
}
return Boolean(resolveHookState(nextState, prevState));
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []),
];
}