React-system-hook NPM

React System Hook

Several hooks\helpers to work with device's screen.

Install

npm i react-system-hook

Usage

import {
    useSystem,
    useScreenHeight,
    useScreenWidth,
    useScreenSize,
    useDocumentVisibility,
    ScreenWidthNameEnum,
    screenMinWidth, // object: Record<ScreenWidthNameEnum, number>
    getScreenName, // (screenWidth: number) => ScreenWidthNameEnum
    getDocumentIsVisible, // () => boolean, it always returns `false` for server side rendering
} from 'react-system-hook';

export function ExampleApp(): JSX.Element {
    const {
        screenInfo,
        isBrowser, // true if running in browser, false for SSR
    } = useSystem();

    const {
        devicePixelRatio, // number, default: 2, usually is 2 for smartphones
        isLandscape, // true if width > height
        isMobile, // screen width < 768
        isPortrait, // opposite for isLandscape
        name, // ScreenWidthNameEnum, relative from screen width: 'desktop', 'mobile' or 'tablet'
        isTablet, // screen width < 1024 and width >= 768
        isDesktop, // screen width >= 1024
    } = screenInfo;

    const {
        height, // number, default: 768
        width, // number, default: 1024
    } = useScreenSize();

    const screenWidth = useScreenWidth(); // number, default: 1024
    const screenHeight = useScreenHeight(); // number, default: 768

    const isDocumentVisible = useDocumentVisibility(); // true or false

    return (
        <div>
            <pre>screenInfo = {JSON.stringify(screenInfo, null, 4)}</pre>
            <pre>
                useScreenSize = width: {height}, height: {width}
            </pre>
            <pre>useScreenWidth = width: {screenWidth}</pre>
            <pre>useScreenHeight = height: {screenHeight}</pre>
            <pre>useDocumentVisibility, is document visible: {isDocumentVisible ? 'yes' : 'no'}</pre>
        </div>
    );
}