@pexip/hooks

A common collection of reusable logic for react apps

Install

npm install @pexip/hooks

Usage

//Some Component
import React from 'react';

//import hooks from the package like this
import {usePromise} from '@pexip/hooks';

function broadcastResult = (res) => {
    console.log(res)
};

export const SomeComponent: React.FC<{}> = () => {
    const {error, loading, handleAction: handleSubmitButton} = usePromise(
        () => new Promise(resolve => {
            setTimeout(() => resolve('foo'), 2000);
        }),
        broadcastResult,
        error => {
            if (error) {
                throw error;
            }
        },
    );

    const ErrorMessage = error ? <p>{error}</p> : null;

    return (
        <Form onSubmit={handleSubmitButton}>
            <Button
                type="submit"
                disabled={loading}
            >
                {loading ? 'Loading...' : 'Continue'}
            </Button>
            <ErrorMessage/>
        </Form>
    )
};

Type Aliases

Type Alias	Description
AutoHideUIInterfacesState	-

Variables

Variable	Description
autoHideUIInterfacesStateSignal	-
fullscreenSignal	-
UI_INACTIVITY_TIMEOUT	-

Functions

Function	Description
isFullscreen	a boolean that indicates whether the document is in full-screen mode.
useAnimationFrame	-
useAutoHideUIInterfaces	Hook to signal display state (show/hide) based on UI inactivity timeout
useCountDown	-
useEnter	-
useFullscreenApi	returns a Browser API agnostic access to the Fullscreen API.
useHotKey	-
useInterval	-
useIsInWindowBottomHalf	-
useIsInWindowRightHalf	-
useIsMounted	From https://usehooks-ts.com/react-hook/use-is-mounted
useMatchMedia	-
useOnClickOutside	Hook that only runs callback on click events outside of the referenced element
usePrevious	-
useSizeObserver	-
useToggleFullscreen	useCallback to toggle browser's fullscreen.
useWideContainerObserver	-