@aweebit/react-essentials 0.5.3 → 0.6.0

package/README.md

@@ -0,0 +1,290 @@
+# @aweebit/react-essentials
+
+## RestrictedContext
+
+```ts
+type RestrictedContext<T> =
+  Context<T> extends Provider<T>
+    ? {
+        Provider: Provider<T>;
+        displayName: string;
+      } & Provider<T>
+    : {
+        Provider: Provider<T>;
+        displayName: string;
+      };
+```
+
+Defined in: [misc/createSafeContext.ts:17](https://github.com/aweebit/react-essentials/blob/v0.6.0/src/misc/createSafeContext.ts#L17)
+
+A React context with a required `displayName` and the obsolete `Consumer`
+property purposefully omitted so that it is impossible to pass the context
+as an argument to `useContext` or `use` (the hook produced with
+[`createSafeContext`](#createsafecontext) should be used instead)
+
+### Type Parameters
+
+| Type Parameter |
+| -------------- |
+| `T`            |
+
+### See
+
+[`createSafeContext`](#createsafecontext)
+
+---
+
+## SafeContext
+
+```ts
+type SafeContext<DisplayName, T> = {
+  [K in `${DisplayName}Context`]: RestrictedContext<T>;
+} & { [K in `use${DisplayName}`]: () => T };
+```
+
+Defined in: [misc/createSafeContext.ts:25](https://github.com/aweebit/react-essentials/blob/v0.6.0/src/misc/createSafeContext.ts#L25)
+
+### Type Parameters
+
+| Type Parameter                   |
+| -------------------------------- |
+| `DisplayName` _extends_ `string` |
+| `T`                              |
+
+### See
+
+[`createSafeContext`](#createsafecontext)
+
+---
+
+## useEventListener()
+
+```ts
+function useEventListener<T>(eventName, handler, element?, options?): void;
+```
+
+Defined in: [hooks/useEventListener.ts:120](https://github.com/aweebit/react-essentials/blob/v0.6.0/src/hooks/useEventListener.ts#L120)
+
+Adds `handler` as a listener for the event `eventName` of `element` with the
+provided `options` applied
+
+If `element` is `undefined`, `window` is used instead.
+
+If `element` is `null`, no event listener is added.
+
+### Example
+
+```tsx
+useEventListener('resize', () => {
+  console.log(window.innerWidth, window.innerHeight);
+});
+
+useEventListener(
+  'visibilitychange',
+  () => console.log(document.visibilityState),
+  document,
+);
+
+const buttonRef = useRef<HTMLButtonElement>(null);
+useEventListener('click', () => console.log('click'), buttonRef.current);
+```
+
+### Type Parameters
+
+| Type Parameter              |
+| --------------------------- |
+| `T` _extends_ `EventTarget` |
+
+### Parameters
+
+| Parameter   | Type                                   |
+| ----------- | -------------------------------------- |
+| `eventName` | `string`                               |
+| `handler`   | (`this`, `event`) => `void`            |
+| `element?`  | `null` \| `T`                          |
+| `options?`  | `boolean` \| `AddEventListenerOptions` |
+
+### Returns
+
+`void`
+
+---
+
+## useForceUpdate()
+
+```ts
+function useForceUpdate(callback?): [() => void, bigint];
+```
+
+Defined in: [hooks/useForceUpdate.ts:32](https://github.com/aweebit/react-essentials/blob/v0.6.0/src/hooks/useForceUpdate.ts#L32)
+
+Enables you to imperatively trigger re-rendering of components
+
+This hook is designed in the most general way possible in order to cover all
+imaginable use cases.
+
+### Parameters
+
+| Parameter   | Type         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ----------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `callback?` | () => `void` | An optional callback function to call during renders that were triggered with `forceUpdate()` Can be used for conditionally calling state setters when state needs to be reset. That is legal and better than using effects (see [You Might Not Need an Effect \> Adjusting some state when a prop changes](https://react.dev/learn/-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes)), but can often be avoided by using [`useStateWithDeps`](#usestatewithdeps) or [`useReducerWithDeps`](#usereducerwithdeps). Important: the callback function is called once per render, not once per `forceUpdate` call! If React batches `forceUpdate` calls, then it will only be called once. |
+
+### Returns
+
+\[() => `void`, `bigint`\]
+
+An array with the following two elements:
+
+1. A `forceUpdate` function that triggers a re-render
+2. The number of times `forceUpdate` has been called so far
+
+---
+
+## useReducerWithDeps()
+
+```ts
+function useReducerWithDeps<S, A>(
+  reducer,
+  initialState,
+  deps,
+): [S, ActionDispatch<A>];
+```
+
+Defined in: [hooks/useReducerWithDeps.ts:49](https://github.com/aweebit/react-essentials/blob/v0.6.0/src/hooks/useReducerWithDeps.ts#L49)
+
+`useReducer` hook with an additional dependency array `deps` that resets the
+state to `initialState` when dependencies change
+
+### On linter support
+
+The `react-hooks/exhaustive-deps` ESLint rule doesn't support hooks where
+the dependency array parameter is at any other position than the second.
+However, as we would like to keep the hook as compatible with `useReducer` as
+possible, we don't want to artificially change the parameter's position.
+Therefore, there will be no warnings about missing dependencies.
+Because of that, additional caution is advised!
+Be sure to check no dependencies are missing from the `deps` array.
+
+Related issue: [https://github.com/facebook/react/issues/25443](https://github.com/facebook/react/issues/25443).
+
+Unlike `eslint-plugin-react-hooks` maintained by React's team, the unofficial
+`useExhaustiveDependencies` rule provided for Biome by Biome's team
+does actually have support for dependency arrays at other positions, see
+[useExhaustiveDependencies \> Options \> Validating dependencies](https://biomejs.dev/linter/rules/use-exhaustive-dependencies/#validating-dependencies).
+
+### Type Parameters
+
+| Type Parameter               |
+| ---------------------------- |
+| `S`                          |
+| `A` _extends_ `AnyActionArg` |
+
+### Parameters
+
+| Parameter      | Type                             | Description                                                                                                                                                                                                                                                                                                               |
+| -------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `reducer`      | (`prevState`, ...`args`) => `S`  | The reducer function that specifies how the state gets updated                                                                                                                                                                                                                                                            |
+| `initialState` | `S` \| (`previousState?`) => `S` | The value to which the state is set when the component is mounted or dependencies change It can also be a function that returns a state value. If the state is reset due to a change of dependencies, this function will be passed the previous state as its argument (will be `undefined` in the first call upon mount). |
+| `deps`         | `DependencyList`                 | Dependencies that reset the state to `initialState`                                                                                                                                                                                                                                                                       |
+
+### Returns
+
+\[`S`, `ActionDispatch`\<`A`\>\]
+
+---
+
+## useStateWithDeps()
+
+```ts
+function useStateWithDeps<S>(
+  initialState,
+  deps,
+): [S, Dispatch<SetStateAction<S>>];
+```
+
+Defined in: [hooks/useStateWithDeps.ts:31](https://github.com/aweebit/react-essentials/blob/v0.6.0/src/hooks/useStateWithDeps.ts#L31)
+
+`useState` hook with an additional dependency array `deps` that resets the
+state to `initialState` when dependencies change
+
+### Type Parameters
+
+| Type Parameter |
+| -------------- |
+| `S`            |
+
+### Parameters
+
+| Parameter      | Type                             | Description                                                                                                                                                                                                                                                                                                               |
+| -------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `initialState` | `S` \| (`previousState?`) => `S` | The value to which the state is set when the component is mounted or dependencies change It can also be a function that returns a state value. If the state is reset due to a change of dependencies, this function will be passed the previous state as its argument (will be `undefined` in the first call upon mount). |
+| `deps`         | `DependencyList`                 | Dependencies that reset the state to `initialState`                                                                                                                                                                                                                                                                       |
+
+### Returns
+
+\[`S`, `Dispatch`\<`SetStateAction`\<`S`\>\>\]
+
+---
+
+## createSafeContext()
+
+```ts
+function createSafeContext<T>(): <DisplayName>(
+  displayName,
+) => SafeContext<DisplayName, T>;
+```
+
+Defined in: [misc/createSafeContext.ts:56](https://github.com/aweebit/react-essentials/blob/v0.6.0/src/misc/createSafeContext.ts#L56)
+
+For a given type `T`, returns a function that produces both a context of that
+type and a hook that returns the current context value if one was provided,
+or throws an error otherwise
+
+### Example
+
+```tsx
+const { ItemsContext, useItems } = createSafeContext<string[]>()('Items');
+
+const Parent = () => (
+  <ItemsContext value={['compass', 'newspaper', 'banana']}>
+    <Child />
+  </ItemsContext>
+);
+
+const Child = () => useItems().join(', ');
+```
+
+### Type Parameters
+
+| Type Parameter | Default type |
+| -------------- | ------------ |
+| `T`            | `never`      |
+
+### Returns
+
+A function that accepts a single string argument `displayName` (e.g.
+`"Items"`) and returns an object with the following properties:
+
+- `` `${displayName}Context` `` (e.g. `ItemsContext`): the context
+- `` `use${displayName}` `` (e.g. `useItems`): a hook that returns the
+  current context value if one was provided, or throws an error otherwise
+
+```ts
+<DisplayName>(displayName): SafeContext<DisplayName, T>;
+```
+
+#### Type Parameters
+
+| Type Parameter                   |
+| -------------------------------- |
+| `DisplayName` _extends_ `string` |
+
+#### Parameters
+
+| Parameter     | Type                                                                                             |
+| ------------- | ------------------------------------------------------------------------------------------------ |
+| `displayName` | \[`T`\] _extends_ \[`never`\] ? `never` : `ArgumentFallback`\<`DisplayName`, `never`, `string`\> |
+
+#### Returns
+
+[`SafeContext`](#safecontext)\<`DisplayName`, `T`\>

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useEventListener.js';
+export * from './useForceUpdate.js';
+export * from './useReducerWithDeps.js';
+export * from './useStateWithDeps.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useEventListener.js';
+export * from './useForceUpdate.js';
+export * from './useReducerWithDeps.js';
+export * from './useStateWithDeps.js';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}

package/dist/hooks/useEventListener.d.ts

@@ -5,16 +5,75 @@
  * @copyright 2020 Julien CARON
  */
 /**
- * Adds `handler` as a listener for the event `eventName` of `element`
- * (or `window` by default) with the provided `options` applied
+ * Adds `handler` as a listener for the event `eventName` of `element` with the
+ * provided `options` applied
  *
- * It is the user's responsibility to make sure `element` and `options` values
- * are correctly memoized!
+ * If `element` is `undefined`, `window` is used instead.
+ *
+ * If `element` is `null`, no event listener is added.
+ *
+ * @example
+ * ```tsx
+ * useEventListener('resize', () => {
+ *   console.log(window.innerWidth, window.innerHeight);
+ * });
+ *
+ * useEventListener(
+ *   'visibilitychange',
+ *   () => console.log(document.visibilityState),
+ *   document
+ * );
+ *
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ * useEventListener("click", () => console.log("click"), buttonRef.current);
+ * ```
+ *
+ * @ignore
+ */
+export declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement>(eventName: K, handler: (this: NoInfer<T>, event: HTMLElementEventMap[K]) => void, element: T | null, options?: boolean | AddEventListenerOptions): void;
+/**
+ * @see {@linkcode useEventListener}
+ * @ignore
+ */
+export declare function useEventListener<K extends keyof SVGElementEventMap, T extends SVGElement>(eventName: K, handler: (this: NoInfer<T>, event: SVGElementEventMap[K]) => void, element: T | null, options?: boolean | AddEventListenerOptions): void;
+/**
+ * @see {@linkcode useEventListener}
+ * @ignore
+ */
+export declare function useEventListener<K extends keyof MathMLElementEventMap, T extends MathMLElement>(eventName: K, handler: (this: NoInfer<T>, event: MathMLElementEventMap[K]) => void, element: T | null, options?: boolean | AddEventListenerOptions): void;
+/**
+ * @see {@linkcode useEventListener}
+ * @ignore
+ */
+export declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (this: Document, event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
+/**
+ * @see {@linkcode useEventListener}
+ * @ignore
+ */
+export declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (this: Window, event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
+/**
+ * Adds `handler` as a listener for the event `eventName` of `element` with the
+ * provided `options` applied
+ *
+ * If `element` is `undefined`, `window` is used instead.
+ *
+ * If `element` is `null`, no event listener is added.
+ *
+ * @example
+ * ```tsx
+ * useEventListener('resize', () => {
+ *   console.log(window.innerWidth, window.innerHeight);
+ * });
+ *
+ * useEventListener(
+ *   'visibilitychange',
+ *   () => console.log(document.visibilityState),
+ *   document
+ * );
+ *
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ * useEventListener("click", () => console.log("click"), buttonRef.current);
+ * ```
  */
-declare function useEventListener<K extends keyof SVGElementEventMap, T extends SVGElement>(eventName: K, handler: (this: T, event: SVGElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement>(eventName: K, handler: (this: T, event: HTMLElementEventMap[K]) => void, element: T, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (this: Document, event: DocumentEventMap[K]) => void, element: Document, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (this: Window, event: WindowEventMap[K]) => void, element?: Window, options?: boolean | AddEventListenerOptions): void;
-declare function useEventListener(eventName: string, handler: (this: EventTarget, event: Event) => void, element?: EventTarget, options?: boolean | AddEventListenerOptions): void;
-export default useEventListener;
+export declare function useEventListener<T extends EventTarget>(eventName: string, handler: (this: NoInfer<T>, event: Event) => void, element?: T | null, options?: boolean | AddEventListenerOptions): void;
 //# sourceMappingURL=useEventListener.d.ts.map

package/dist/hooks/useEventListener.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../lib/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;;GAMG;AAGH,iBAAS,gBAAgB,CACvB,CAAC,SAAS,MAAM,kBAAkB,EAClC,CAAC,SAAS,UAAU,EAEpB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,EACxD,OAAO,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CACvB,CAAC,SAAS,MAAM,mBAAmB,EACnC,CAAC,SAAS,WAAW,EAErB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,EACzD,OAAO,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACxD,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7D,OAAO,EAAE,QAAQ,EACjB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CAAC,CAAC,SAAS,MAAM,cAAc,EACtD,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EACzD,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAGR,iBAAS,gBAAgB,CACvB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,EAClD,OAAO,CAAC,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAiCR,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,mBAAmB,EACnC,CAAC,SAAS,WAAW,EAErB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,EAClE,OAAO,EAAE,CAAC,GAAG,IAAI,EACjB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAER;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,kBAAkB,EAClC,CAAC,SAAS,UAAU,EAEpB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,EACjE,OAAO,EAAE,CAAC,GAAG,IAAI,EACjB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAER;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,qBAAqB,EACrC,CAAC,SAAS,aAAa,EAEvB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,IAAI,EACpE,OAAO,EAAE,CAAC,GAAG,IAAI,EACjB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAER;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAC/D,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7D,OAAO,EAAE,QAAQ,EACjB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAER;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,cAAc,EAC7D,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EACzD,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;AAER;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,EACpD,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,EACjD,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAClB,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC"}

package/dist/hooks/useEventListener.js

@@ -4,26 +4,30 @@
  * @license MIT
  * @copyright 2020 Julien CARON
  */
-import { useEffect, useLayoutEffect, useRef } from 'react';
-function useEventListener(eventName, handler, element, options) {
-    // Create a ref that stores handler
-    const savedHandler = useRef(handler);
-    useLayoutEffect(() => {
-        savedHandler.current = handler;
-    }, [handler]);
+import { useEffect, useMemo, useRef } from 'react';
+export function useEventListener(eventName, handler, element, options) {
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
+    const { capture = false, once = false, passive, signal, } = typeof options === 'boolean' ? { capture: options } : (options ?? {});
+    const memoizedOptions = useMemo(() => options, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [capture, once, passive, signal]);
     useEffect(() => {
+        if (element === null) {
+            // No element has been attached to the ref yet
+            return;
+        }
         // Define the listening target
         const targetElement = element ?? window;
         // Create event listener that calls handler function stored in ref
         const listener = function (event) {
-            savedHandler.current.call(this, event);
+            handlerRef.current.call(this, event);
         };
-        targetElement.addEventListener(eventName, listener, options);
+        targetElement.addEventListener(eventName, listener, memoizedOptions);
         // Remove event listener on cleanup
         return () => {
-            targetElement.removeEventListener(eventName, listener, options);
+            targetElement.removeEventListener(eventName, listener, memoizedOptions);
         };
-    }, [eventName, element, options]);
+    }, [eventName, element, memoizedOptions]);
 }
-export default useEventListener;
 //# sourceMappingURL=useEventListener.js.map

package/dist/hooks/useEventListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.js","sourceRoot":"","sources":["../../lib/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAwD3D,SAAS,gBAAgB,CACvB,SAAiB,EACjB,OAAkD,EAClD,OAAqB,EACrB,OAA2C;IAE3C,mCAAmC;IACnC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErC,eAAe,CAAC,GAAG,EAAE;QACnB,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;IACjC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,8BAA8B;QAC9B,MAAM,aAAa,GAAG,OAAO,IAAI,MAAM,CAAC;QAExC,kEAAkE;QAClE,MAAM,QAAQ,GAAmB,UAAU,KAAK;YAC9C,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAE7D,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAClE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AACpC,CAAC;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useEventListener.js","sourceRoot":"","sources":["../../src/hooks/useEventListener.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAuHnD,MAAM,UAAU,gBAAgB,CAC9B,SAAiB,EACjB,OAAkD,EAClD,OAA4B,EAC5B,OAA2C;IAE3C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,MAAM,EACJ,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,KAAK,EACZ,OAAO,EACP,MAAM,GACP,GAAG,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAE1E,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,OAAO;IACb,uDAAuD;IACvD,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CACjC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;YACrB,8CAA8C;YAC9C,OAAO;QACT,CAAC;QAED,8BAA8B;QAC9B,MAAM,aAAa,GAAG,OAAO,IAAI,MAAM,CAAC;QAExC,kEAAkE;QAClE,MAAM,QAAQ,GAAmB,UAAU,KAAK;YAC9C,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;QAErE,mCAAmC;QACnC,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;QAC1E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC;AAC5C,CAAC"}

package/dist/hooks/useForceUpdate.d.ts

@@ -10,9 +10,8 @@
  * Can be used for conditionally calling state setters when state needs to be
  * reset. That is legal and better than using effects (see
  * {@link https://react.dev/learn/-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes You Might Not Need an Effect > Adjusting some state when a prop changes}),
- * but can often be avoided by using
- * [`useStateWithDeps`]({@link ./useStateWithDeps.ts}) or
- * [`useReducerWithDeps`]({@link ./useReducerWithDeps.ts}).
+ * but can often be avoided by using {@linkcode useStateWithDeps} or
+ * {@linkcode useReducerWithDeps}.
  *
  * Important: the callback function is called once per render, not once per
  * `forceUpdate` call! If React batches `forceUpdate` calls, then it will only
@@ -23,5 +22,5 @@
  * 1. A `forceUpdate` function that triggers a re-render
  * 2. The number of times `forceUpdate` has been called so far
  */
-export default function useForceUpdate(callback?: () => void): [() => void, bigint];
+export declare function useForceUpdate(callback?: () => void): [() => void, bigint];
 //# sourceMappingURL=useForceUpdate.d.ts.map

package/dist/hooks/useForceUpdate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useForceUpdate.d.ts","sourceRoot":"","sources":["../../lib/hooks/useForceUpdate.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,GACpB,CAAC,MAAM,IAAI,EAAE,MAAM,CAAC,CAUtB"}
+{"version":3,"file":"useForceUpdate.d.ts","sourceRoot":"","sources":["../../src/hooks/useForceUpdate.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,EAAE,MAAM,CAAC,CAU1E"}

package/dist/hooks/useForceUpdate.js

@@ -1,4 +1,5 @@
 import { useReducer, useRef } from 'react';
+/* eslint-enable */
 /**
  * Enables you to imperatively trigger re-rendering of components
  *
@@ -11,9 +12,8 @@ import { useReducer, useRef } from 'react';
  * Can be used for conditionally calling state setters when state needs to be
  * reset. That is legal and better than using effects (see
  * {@link https://react.dev/learn/-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes You Might Not Need an Effect > Adjusting some state when a prop changes}),
- * but can often be avoided by using
- * [`useStateWithDeps`]({@link ./useStateWithDeps.ts}) or
- * [`useReducerWithDeps`]({@link ./useReducerWithDeps.ts}).
+ * but can often be avoided by using {@linkcode useStateWithDeps} or
+ * {@linkcode useReducerWithDeps}.
  *
  * Important: the callback function is called once per render, not once per
  * `forceUpdate` call! If React batches `forceUpdate` calls, then it will only
@@ -24,7 +24,7 @@ import { useReducer, useRef } from 'react';
  * 1. A `forceUpdate` function that triggers a re-render
  * 2. The number of times `forceUpdate` has been called so far
  */
-export default function useForceUpdate(callback) {
+export function useForceUpdate(callback) {
     // It is very unlikely that the number of updates will exceed
     // Number.MAX_SAFE_INTEGER, but not impossible. That is why we use bigints.
     const [counter, forceUpdate] = useReducer((prev) => prev + 1n, 0n);

package/dist/hooks/useForceUpdate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForceUpdate.js","sourceRoot":"","sources":["../../lib/hooks/useForceUpdate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,QAAqB;IAErB,6DAA6D;IAC7D,2EAA2E;IAC3E,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,OAAO,KAAK,UAAU,CAAC,OAAO,EAAE,CAAC;QACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;QAC7B,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC;IACD,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;AAChC,CAAC"}
+{"version":3,"file":"useForceUpdate.js","sourceRoot":"","sources":["../../src/hooks/useForceUpdate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAK3C,mBAAmB;AAEnB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,cAAc,CAAC,QAAqB;IAClD,6DAA6D;IAC7D,2EAA2E;IAC3E,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,OAAO,KAAK,UAAU,CAAC,OAAO,EAAE,CAAC;QACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;QAC7B,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC;IACD,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;AAChC,CAAC"}

package/dist/hooks/useReducerWithDeps.d.ts

@@ -1,8 +1,11 @@
-import { type ActionDispatch, type AnyActionArg, type DependencyList } from 'react';
+import { type DependencyList } from 'react';
+/** @ignore */
+export type AnyActionArg = [] | [any];
+/** @ignore */
+export type ActionDispatch<ActionArg extends AnyActionArg> = (...args: ActionArg) => void;
 /**
- * `useReducer` hook with an additional dependency array that resets the state
- * to the `initialState` param when the dependencies passed in the `deps` array
- * change
+ * `useReducer` hook with an additional dependency array `deps` that resets the
+ * state to `initialState` when dependencies change
  *
  * ### On linter support
  *
@@ -11,7 +14,7 @@ import { type ActionDispatch, type AnyActionArg, type DependencyList } from 'rea
  * However, as we would like to keep the hook as compatible with `useReducer` as
  * possible, we don't want to artificially change the parameter's position.
  * Therefore, there will be no warnings about missing dependencies.
- * Because of that, addition caution is advised!
+ * Because of that, additional caution is advised!
  * Be sure to check no dependencies are missing from the `deps` array.
  *
  * Related issue: {@link https://github.com/facebook/react/issues/25443}.
@@ -19,18 +22,18 @@ import { type ActionDispatch, type AnyActionArg, type DependencyList } from 'rea
  * Unlike `eslint-plugin-react-hooks` maintained by React's team, the unofficial
  * `useExhaustiveDependencies` rule provided for Biome by Biome's team
  * does actually have support for dependency arrays at other positions, see
- * {@link https://biomejs.dev/linter/rules/use-exhaustive-dependencies/#validating-dependencies}.
+ * {@link https://biomejs.dev/linter/rules/use-exhaustive-dependencies/#validating-dependencies useExhaustiveDependencies > Options > Validating dependencies}.
  *
  * @param reducer The reducer function that specifies how the state gets updated
  *
- * @param initialState The state that will be set when the component mounts or
- * the dependencies change
+ * @param initialState The value to which the state is set when the component is
+ * mounted or dependencies change
  *
- * It can also be a function which returns a state value. If the state is reset
+ * It can also be a function that returns a state value. If the state is reset
  * due to a change of dependencies, this function will be passed the previous
  * state as its argument (will be `undefined` in the first call upon mount).
  *
  * @param deps Dependencies that reset the state to `initialState`
  */
-export default function useReducerWithDeps<S, A extends AnyActionArg>(reducer: (prevState: S, ...args: A) => S, initialState: S | ((previousState?: S) => S), deps: DependencyList): [S, ActionDispatch<A>];
+export declare function useReducerWithDeps<S, A extends AnyActionArg>(reducer: (prevState: S, ...args: A) => S, initialState: S | ((previousState?: S) => S), deps: DependencyList): [S, ActionDispatch<A>];
 //# sourceMappingURL=useReducerWithDeps.d.ts.map

package/dist/hooks/useReducerWithDeps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReducerWithDeps.d.ts","sourceRoot":"","sources":["../../lib/hooks/useReducerWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AAGf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,YAAY,EAClE,OAAO,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EACxC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAC5C,IAAI,EAAE,cAAc,GACnB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAYxB"}
+{"version":3,"file":"useReducerWithDeps.d.ts","sourceRoot":"","sources":["../../src/hooks/useReducerWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAOjE,cAAc;AAEd,MAAM,MAAM,YAAY,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;AAEtC,cAAc;AACd,MAAM,MAAM,cAAc,CAAC,SAAS,SAAS,YAAY,IAAI,CAC3D,GAAG,IAAI,EAAE,SAAS,KACf,IAAI,CAAC;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,YAAY,EAC1D,OAAO,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EACxC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAC5C,IAAI,EAAE,cAAc,GACnB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAYxB"}

package/dist/hooks/useReducerWithDeps.js

@@ -1,9 +1,8 @@
-import { useCallback, useRef, } from 'react';
-import useStateWithDeps from './useStateWithDeps.js';
+import { useCallback, useRef } from 'react';
+import { useStateWithDeps } from './useStateWithDeps.js';
 /**
- * `useReducer` hook with an additional dependency array that resets the state
- * to the `initialState` param when the dependencies passed in the `deps` array
- * change
+ * `useReducer` hook with an additional dependency array `deps` that resets the
+ * state to `initialState` when dependencies change
  *
  * ### On linter support
  *
@@ -12,7 +11,7 @@ import useStateWithDeps from './useStateWithDeps.js';
  * However, as we would like to keep the hook as compatible with `useReducer` as
  * possible, we don't want to artificially change the parameter's position.
  * Therefore, there will be no warnings about missing dependencies.
- * Because of that, addition caution is advised!
+ * Because of that, additional caution is advised!
  * Be sure to check no dependencies are missing from the `deps` array.
  *
  * Related issue: {@link https://github.com/facebook/react/issues/25443}.
@@ -20,20 +19,20 @@ import useStateWithDeps from './useStateWithDeps.js';
  * Unlike `eslint-plugin-react-hooks` maintained by React's team, the unofficial
  * `useExhaustiveDependencies` rule provided for Biome by Biome's team
  * does actually have support for dependency arrays at other positions, see
- * {@link https://biomejs.dev/linter/rules/use-exhaustive-dependencies/#validating-dependencies}.
+ * {@link https://biomejs.dev/linter/rules/use-exhaustive-dependencies/#validating-dependencies useExhaustiveDependencies > Options > Validating dependencies}.
  *
  * @param reducer The reducer function that specifies how the state gets updated
  *
- * @param initialState The state that will be set when the component mounts or
- * the dependencies change
+ * @param initialState The value to which the state is set when the component is
+ * mounted or dependencies change
  *
- * It can also be a function which returns a state value. If the state is reset
+ * It can also be a function that returns a state value. If the state is reset
  * due to a change of dependencies, this function will be passed the previous
  * state as its argument (will be `undefined` in the first call upon mount).
  *
  * @param deps Dependencies that reset the state to `initialState`
  */
-export default function useReducerWithDeps(reducer, initialState, deps) {
+export function useReducerWithDeps(reducer, initialState, deps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const [state, setState] = useStateWithDeps(initialState, deps);
     // Only the initially provided reducer is used

package/dist/hooks/useReducerWithDeps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReducerWithDeps.js","sourceRoot":"","sources":["../../lib/hooks/useReducerWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,WAAW,EACX,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,OAAwC,EACxC,YAA4C,EAC5C,IAAoB;IAEpB,uDAAuD;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAE/D,8CAA8C;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,QAAQ,CAAC,GAAG,IAAO;QACvD,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1E,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;IAE1D,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"useReducerWithDeps.js","sourceRoot":"","sources":["../../src/hooks/useReducerWithDeps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAezD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,kBAAkB,CAChC,OAAwC,EACxC,YAA4C,EAC5C,IAAoB;IAEpB,uDAAuD;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAE/D,8CAA8C;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,QAAQ,CAAC,GAAG,IAAO;QACvD,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1E,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;IAE1D,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC"}