abonello

import {FC, useEffect} from 'react';

export interface KeyPressedProps {
    keyCode: string;

    onPress: () => void;

    onRelease: () => void;
}

abonello

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);

abonello

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);

abonello

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 () => {

abonello

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;
};

abonello

import {useCallback, useState} from 'react';

export const useStatePair = <TType extends any>(initialState?: TType) => {
    const [[prev, current], setPair] = useState<Array<TType | undefined>>([
        undefined,
        initialState
    ]);
    const setValue = useCallback(
        (next: TType) => setPair([current, next]),
        [current]

abonello

import {useCallback, useState} from 'react';

export const useStateCount = <TType extends any>(initialState?: TType) => {
    const [[count, value], setState] = useState([0, initialState]);
    const setValue = useCallback(
        (next: TType) => setState([count + 1, next]),
        [count]
    );
    return [count, value, setValue];
};

abonello

import {useCallback, useState} from 'react';

export const useStateBuffer = <TType extends any>(
    size: number,
    initialState: TType
) => {
    const [values, setState] = useState<Array<TType>>([initialState]);
    const setValue = useCallback(
        (next: TType) => setState([...values, next].slice(0, size)),
        [values]

abonello

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

export const useStateJson = <TType extends any>(initialState?: TType) => {
    const [json, setState] = useState<string>(
        JSON.stringify(initialState ?? '')
    );
    const value = useMemo(() => JSON.parse(json), [json]);
    const setValue = useCallback(
        (next: TType) => setState(JSON.stringify(next ?? '')),
        []

abonello

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

export const useStateDebounce = <TType extends any>(ms: number, initialState?: TType) => {
    const [state, setState] = useState(initialState);
    const ref = useRef(0);
    const setValue = useCallback(value => {
        window.clearTimeout(ref.current);
        ref.current = window.setTimeout(() => setState(value), ms);
    }, [ms]);
    useEffect(() => () => window.clearTimeout(ref.current), []);