Package Exports

react-system-hook
react-system-hook/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-system-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

License

See license.