@siberiacancode/reactuse 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,338 @@
+import React from 'react';
+
+/** The use boolean return type */
+type UseBooleanReturn = [
+    /** The current boolean state value */
+    value: boolean,
+    /** Function to toggle the boolean state */
+    toggle: (value?: boolean) => void
+];
+/**
+ * @name useBoolean
+ * @description - Hook provides a boolean state and a function to toggle the boolean value
+ *
+ * @param {boolean} [initialValue=false] The initial boolean value
+ * @returns {UseBooleanReturn} An object containing the boolean state value and utility functions to manipulate the state
+ *
+ * @example
+ * const [on, toggle] = useBoolean()
+ */
+declare const useBoolean: (initialValue?: boolean) => UseBooleanReturn;
+
+type UseClickOutsideTarget = React.RefObject<Element | null> | (() => Element) | Element;
+type UseClickOutsideReturn<Target extends UseClickOutsideTarget | Array<UseClickOutsideTarget> = any> = React.RefObject<Target>;
+type UseClickOutside = {
+    <Target extends UseClickOutsideTarget | Array<UseClickOutsideTarget> = any>(target: Target, callback: (event: Event) => void): void;
+    <Target extends UseClickOutsideTarget | Array<UseClickOutsideTarget> = any>(callback: (event: Event) => void, target?: never): UseClickOutsideReturn<Target>;
+};
+/**
+ * @name useClickOutside
+ * @description - Hook that manages a counter with increment, decrement, reset, and set functionalities
+ *
+ * @example
+ * const { count, dec, inc, reset, set } = useCounter(5);
+ */
+declare const useClickOutside: UseClickOutside;
+
+declare const legacyCopyToClipboard: (value: string) => void;
+/** The use copy to clipboard return type */
+type UseCopyToClipboardReturn = [
+    /** The copied value */
+    value: string | null,
+    /** Function to copy to clipboard  */
+    copyToClipboard: (value: string) => Promise<void>
+];
+/**
+ * @name useCopyToClipboard
+ * @description - Hook that manages a copy to clipboard
+ *
+ * @returns {UseCopyToClipboardReturn} An object containing the boolean state value and utility functions to manipulate the state
+ *
+ * @example
+ * const [copiedText, copyToClipboard] = useCopyToClipboard();
+ */
+declare const useCopyToClipboard: () => UseCopyToClipboardReturn;
+
+/** The use counter options */
+interface UseCounterOptions {
+    /** The min of count value */
+    min?: number;
+    /** The max of count value */
+    max?: number;
+}
+interface UseCounterParams {
+    /** The initial number value, defaults to 0 */
+    initialValue?: number;
+    /** The min of count value */
+    min?: number;
+    /** The max of count value */
+    max?: number;
+}
+/** The use counter return type */
+interface UseCounterReturn {
+    /** The current count value */
+    count: number;
+    /** Function to set a specific value to the counter */
+    set: React.Dispatch<React.SetStateAction<number>>;
+    /** Function to reset the counter to its initial value. */
+    reset: () => void;
+    /** Function to increment the counter */
+    inc: (value?: number) => void;
+    /** Function to decrement the counter */
+    dec: (value?: number) => void;
+}
+type UseCounter = {
+    (initialValue?: number, options?: UseCounterOptions): UseCounterReturn;
+    ({ initialValue, max, min }: UseCounterParams, options?: never): UseCounterReturn;
+};
+/**
+ * @name useCounter
+ * @description - Hook that manages a counter with increment, decrement, reset, and set functionalities
+ *
+ * @overload
+ * @param {number} [initialValue=0] The initial number value
+ * @param {UseCounterOptions} [useCounterOptions] The use counter options
+ * @returns {UseCounterReturn} An object containing the current count and functions to interact with the counter
+
+ * @overload
+ * @param {UseCounterParams} [useCounterParams] The use counter params
+ * @returns {UseCounterReturn} An object containing the current count and functions to interact with the counter
+ *
+ * @example
+ * const { count, dec, inc, reset, set } = useCounter(5);
+ */
+declare const useCounter: UseCounter;
+
+interface UseDebouncedValueOptions {
+    maxWait?: number;
+}
+/**
+ * @name useDebouncedValue
+ * @description - Hook that manages a counter with increment, decrement, reset, and set functionalities
+ *
+ * @param {any} value fix me
+ * @param {number} delay The delay in milliseconds
+ *
+ * @example
+ * const { count, dec, inc, reset, set } = useCounter(5);
+ */
+declare const useDebouncedValue: <Value>(value: Value, delay: number, options?: UseDebouncedValueOptions) => readonly [Value, (value: Value) => void];
+
+interface UseDocumentTitleOptions {
+    /** Restore the previous title on unmount */
+    restoreOnUnmount?: boolean;
+}
+type UseDocumentTitleReturn = [
+    /** The current title */
+    title: string,
+    /** Function to update the title */
+    setTitle: (title: string) => void
+];
+/**
+ * @name useDocumentTitle
+ * @description - Hook that manages the document title and allows updating it
+ *
+ * @param {string} [value] The initial title. If not provided, the current document title will be used
+ * @param {UseDocumentTitleOptions} [options] The use document title options
+ * @returns {UseDocumentTitleReturn} An array containing the current title and a function to update the title
+ *
+ * @example
+ * const [title, setTitle] = useDocumentTitle();
+ */
+declare function useDocumentTitle(value?: string, options?: UseDocumentTitleOptions): UseDocumentTitleReturn;
+
+declare const useDocumentVisibility: () => DocumentVisibilityState;
+
+type UseEventListenerTarget = React.RefObject<Element | null> | (() => Element) | Element | Window | Document;
+type UseEventListenerOptions = boolean | AddEventListenerOptions;
+type UseEventListenerReturn<Target extends UseEventListenerTarget = any> = React.RefObject<Target>;
+type UseEventListener = {
+    <Event extends keyof WindowEventMap = keyof WindowEventMap>(target: Window, event: Event, listener: (this: Window, event: WindowEventMap[Event]) => void, options?: UseEventListenerOptions): void;
+    <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(target: Document, event: Event, listener: (this: Document, event: DocumentEventMap[Event]) => void, options?: UseEventListenerOptions): void;
+    <Target extends UseEventListenerTarget, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(target: Target, event: Event, listener: (this: Target, event: HTMLElementEventMap[Event]) => void, options?: UseEventListenerOptions): void;
+    <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(event: Event, listener: (this: Target, event: HTMLElementEventMap[Event]) => void, options?: UseEventListenerOptions, target?: never): UseEventListenerReturn<Target>;
+};
+/**
+ * @name useEventListener
+ * @description - Hook that manages a counter with increment, decrement, reset, and set functionalities
+ *
+ * @example
+ * const { count, dec, inc, reset, set } = useCounter(5);
+ */
+declare const useEventListener: UseEventListener;
+
+type UseHoverTarget = React.RefObject<Element | null> | Element;
+type UseHoverReturn<Target extends UseHoverTarget = any> = [
+    React.RefObject<Target>,
+    boolean
+];
+type UseHover = {
+    <Target extends UseHoverTarget>(target: Target, callback?: () => void): boolean;
+    <Target extends UseHoverTarget>(callback?: () => void, target?: never): UseHoverReturn<Target>;
+};
+/**
+ * @name useHover
+ * @description - Hook that manages a counter with increment, decrement, reset, and set functionalities
+ *
+ * @example
+ * const { count, dec, inc, reset, set } = useCounter(5);
+ */
+declare const useHover: UseHover;
+
+/**
+ * @name useIsomorphicLayoutEffect
+ * @description - Hook conditionally selects either `useLayoutEffect` or `useEffect` based on the environment
+ *
+ * @example
+ * useIsomorphicLayoutEffect(() => console.log('effect'), [])
+ */
+declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+
+type UseKeyPressKey = string | string[];
+type UseKeyPressOptions = {
+    target: UseEventListenerTarget;
+};
+declare const useKeyPress: (key: UseKeyPressKey, options?: UseKeyPressOptions) => boolean;
+
+type UseKeyPressEventKey = string | string[];
+type UseKeyPressEvent = {
+    (key: UseKeyPressEventKey, target: Window, listener: (this: Window, event: WindowEventMap['keydown']) => void, options?: UseEventListenerOptions): void;
+    (key: UseKeyPressEventKey, target: Document, listener: (this: Document, event: DocumentEventMap['keydown']) => void, options?: UseEventListenerOptions): void;
+    <Target extends UseEventListenerTarget>(key: UseKeyPressEventKey, target: Target, listener: (this: Target, event: HTMLElementEventMap['keydown']) => void, options?: UseEventListenerOptions): void;
+    <Target extends Element>(key: UseKeyPressEventKey, listener: (this: Target, event: HTMLElementEventMap['keydown']) => void, options?: UseEventListenerOptions, target?: never): void;
+};
+declare const useKeyPressEvent: UseKeyPressEvent;
+
+declare const useKeysPressed: (target?: UseEventListenerTarget) => string[];
+
+type UseStorageInitialValue<Value> = Value | (() => Value);
+interface UseStorageOptions<Value> {
+    serializer?: (value: Value) => string;
+    deserializer?: (value: string) => Value;
+    storage: Storage;
+}
+declare const dispatchStorageEvent: (params: Partial<StorageEvent>) => boolean;
+/**
+ * @name useStorage
+ * @description - Hook that manages a counter with increment, decrement, reset, and set functionalities
+ *
+ * @example
+ * text
+ */
+declare function useStorage<Value = string | null>(key: string, initialValue?: UseStorageInitialValue<Value>, options?: UseStorageOptions<Value>): {
+    value: Value;
+    set: (value: Value) => void;
+    clear: () => void;
+};
+
+declare const useLocalStorage: <Value>(key: string, initialValue?: UseStorageInitialValue<Value>, options?: UseStorageOptions<Value>) => {
+    value: Value;
+    set: (value: Value) => void;
+    clear: () => void;
+};
+
+declare const useMount: (effect: React.EffectCallback) => void;
+
+type ConnectionType = Connection['type'];
+type ConnectionEffectiveType = Connection['effectiveType'];
+interface UseNetworkReturn {
+    online: boolean;
+    downlink?: Connection['downlink'];
+    downlinkMax?: Connection['downlinkMax'];
+    effectiveType?: Connection['effectiveType'];
+    rtt?: Connection['rtt'];
+    saveData?: Connection['saveData'];
+    type?: Connection['type'];
+}
+declare const getConnection: () => Connection;
+declare const useNetwork: () => UseNetworkReturn;
+
+declare const useNonInitialEffect: (effect: React.EffectCallback, deps?: React.DependencyList) => void;
+
+declare const useOnline: () => boolean;
+
+declare const useOrientation: () => {
+    angle: number;
+    type: OrientationType;
+};
+
+/**
+ * @name useRenderCount
+ * @description - Hook returns count component render times
+ *
+ * @returns {number} A number which determines how many times component renders
+ *
+ * @example
+ * const renderCount = useRenderCount();
+ */
+declare const useRenderCount: () => number;
+
+declare const useSessionStorage: <Value>(key: string, initialValue?: UseStorageInitialValue<Value>, options?: UseStorageOptions<Value>) => {
+    value: Value;
+    set: (value: Value) => void;
+    clear: () => void;
+};
+
+declare function useTimeout(callback: () => void, delay: number): {
+    ready: boolean;
+    clear: () => void;
+};
+
+/**
+ * @name useUnmount
+ * @description - Hook that defines the logic when unmounting a component
+ *
+ * @param {() => void} callback The callback function to be invoked on component unmount
+ *
+ * @returns {void}
+ *
+ * @example
+ * useUnmount(() => console.log('Component unmounted'));
+ */
+declare const useUnmount: (callback: () => void) => void;
+
+/**
+ * @name useWindowEvent
+ * @description - Hook attaches an event listener to the window object for the specified event
+ *
+ * @template Event Key of window event map.
+ * @param {Event} event The event to listen for.
+ * @param {(event: WindowEventMap[Event]) => void} listener The callback function to be executed when the event is triggered
+ * @param {UseEventListenerOptions} [options] The options for the event listener
+ * @returns {void}
+ *
+ * @example
+ * useWindowEvent('click', () => console.log('clicked'));
+ */
+declare const useWindowEvent: <Event extends keyof WindowEventMap>(event: Event, listener: (this: Window, event: WindowEventMap[Event]) => any, options?: UseEventListenerOptions) => void;
+
+/** The use window size return type */
+interface UseWindowSizeParams {
+    /** The initial window width */
+    initialWidth?: number;
+    /** The initial window height */
+    initialHeight?: number;
+}
+/** The use window size return type */
+interface UseWindowSizeReturn {
+    /** The current window width */
+    width: number;
+    /** The current window height */
+    height: number;
+}
+/**
+ * @name useWindowSize
+ * @description - Hook that manages a window size
+ *
+ * @param {UseWindowSizeParams} [useWindowSizeParams] The use copy to clipboard params
+ * @returns {UseWindowSizeReturn} An object containing the current window width and height
+ *
+ * @example
+ * const { width, height } = useWindowSize()
+ */
+declare const useWindowSize: (params?: UseWindowSizeParams) => {
+    width: number;
+    height: number;
+};
+
+export { type ConnectionEffectiveType, type ConnectionType, type UseClickOutside, type UseClickOutsideReturn, type UseCounter, type UseCounterOptions, type UseCounterParams, type UseCounterReturn, type UseDocumentTitleOptions, type UseDocumentTitleReturn, type UseEventListener, type UseEventListenerOptions, type UseEventListenerReturn, type UseEventListenerTarget, type UseHover, type UseHoverReturn, type UseHoverTarget, type UseKeyPressEvent, type UseKeyPressEventKey, type UseKeyPressKey, type UseKeyPressOptions, type UseNetworkReturn, type UseStorageInitialValue, type UseStorageOptions, type UseWindowSizeReturn, dispatchStorageEvent, getConnection, legacyCopyToClipboard, useBoolean, useClickOutside, useCopyToClipboard, useCounter, useDebouncedValue, useDocumentTitle, useDocumentVisibility, useEventListener, useHover, useIsomorphicLayoutEffect, useKeyPress, useKeyPressEvent, useKeysPressed, useLocalStorage, useMount, useNetwork, useNonInitialEffect, useOnline, useOrientation, useRenderCount, useSessionStorage, useStorage, useTimeout, useUnmount, useWindowEvent, useWindowSize };

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@siberiacancode/reactuse",
+  "version": "0.0.1",
+  "description": "Ultimate tool",
+  "license": "MIT",
+  "author": {
+    "name": "SIBERIA CAN CODE 🧊",
+    "url": "https://github.com/siberiacancode"
+  },
+  "contributors": [
+    {
+      "name": "Dmitry Babin",
+      "url": "https://github.com/debabin"
+    }
+  ],
+  "engines": {
+    "node": ">=14"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/siberiacancode/webcam.git"
+  },
+  "homepage": "https://github.com/siberiacancode/webcam",
+  "bugs": "https://github.com/siberiacancode/webcam/issues",
+  "files": [
+    "dist/**/*"
+  ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "shx rm -rf dist && rollup -c --bundleConfigAsCjs",
+    "lint": "eslint . --ext ts --ext tsx --no-error-on-unmatched-pattern --fix",
+    "format": "prettier --write **/*.{ts,jsm,md}",
+    "type": "tsc --noEmit",
+    "pretty": "yarn type && yarn format && yarn lint",
+    "prepare": "husky install",
+    "unit-test": "jest",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "lint-staged": {
+    "*.js": "prettier --write",
+    "*.ts": [
+      "prettier --write",
+      "eslint --no-error-on-unmatched-pattern --fix"
+    ]
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^17.0.2 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@webcam/core": "*"
+  },
+  "devDependencies": {
+    "@siberiacancode/builder": "^1.3.0",
+    "@siberiacancode/eslint": "^1.1.0",
+    "@siberiacancode/jest": "^1.0.2",
+    "@siberiacancode/prettier": "^1.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@types/doctrine": "^0.0.9",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "comment-parser": "^1.4.1",
+    "doctrine": "^3.0.0",
+    "eslint": "^8.56.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "markdown-table": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "shx": "^0.3.4",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.3",
+    "vitepress": "^1.1.4"
+  },
+  "keywords": [
+    "react",
+    "react hooks",
+    "react use",
+    "use",
+    "hooks"
+  ]
+}