codemile

import {
    DependencyList,
    Dispatch,
    MutableRefObject,
    SetStateAction,
    useCallback,
    useEffect,
    useRef,
    useState
} from 'react';

codemile

/**
 * "document_id" -> "document id"
 * "documentId" -> "document id"
 */
export const toSpaces = (str: string): string =>
    str && str
    .replace(/[-_]/g, ' ')
    .replace(/([A-Z])/g, ' $1');

/**

codemile

import {useMemo} from 'react';

/**
 * Prevents React.DOM from replacing methods inside hooks.
 */
const ref = {
    log: console.log,
    error: console.error,
    debug: console.debug
};

codemile

import {DependencyList, useEffect, useMemo} from 'react';

export const useInterval = (
    callback: () => void,
    ms: number,
    deps: DependencyList
) => {
    const all_deps = useMemo(
        () => [callback, ms, ...deps],
        // eslint-disable-next-line react-hooks/exhaustive-deps

codemile

import {FC, useEffect} from 'react';

export interface RepeaterProps {
    disabled?: boolean;

    emitFirst?: boolean;

    onRepeat: () => void;

    speed: number;

codemile

import {FC, useEffect} from 'react';

export interface KeyPressedProps {
    keyCode: string;

    onPress: () => void;

    onRelease: () => void;
}

codemile

import {useCallback, useEffect, useState} from 'react';

export const useStateStorage = <TType extends any>(
    key: string,
    defaultValue: TType
) => {
    const [value, setState] = useState(defaultValue);

    useEffect(() => {
        const store = localStorage.getItem(key);

codemile

import {useEffect, useState} from 'react';

export const useDocVisible = () => {
    const isVisible = () => document.visibilityState === 'visible';
    const [visible, setVisible] = useState(isVisible());
    useEffect(() => {
        const onVisible = () => setVisible(isVisible());
        document.addEventListener('visibilitychange', onVisible);
        return () =>
            document.removeEventListener('visibilitychange', onVisible);

codemile

import {useEffect, useState} from 'react';

export const useWndFocus = () => {
    const [focus, setFocus] = useState(document.hasFocus());
    useEffect(() => {
        const onFocus = () => setFocus(true);
        const onBlur = () => setFocus(false);
        window.addEventListener('focus', onFocus);
        window.addEventListener('blur', onBlur);
        return () => {

codemile

import {useEffect, useState} from 'react';

export const useDebounce = <TType extends any>(next: TType, ms: number) => {
    const [value, setValue] = useState(next);
    useEffect(() => {
        const id = setTimeout(() => setValue(next), ms);
        return () => clearTimeout(id);
    }, [next, ms]);
    return value;
};