@gaopeng123/hooks.use-resize v0.7.10-alpha.0

useResize

(props:ResizeProps):WindowSize

监听窗口变化，返回窗口尺寸

在线demo

参数

type ResizeProps = {
    wait?: number; // 等待时间
}
type WindowSize = {
    availWidth: number;
    availHeight: number;
    width: number;
    height: number;
    screenWidth: number;
    screenHeight: number;
};

Usage

import React from 'react';
import {useResize} from "gaopeng123/hooks.use-resize";

type TestUseResizeProps = {};
const TestUseResize: React.FC<TestUseResizeProps> = (props) => {
    const windowSize: any = useResize();
    const list = Object.keys(windowSize);
    return (
        <React.Fragment>
            <h3>windowSize</h3>
            {
                list.map((key, index) => {
                    const laster = list[index - 1];
                    return index % 2 ? <p>{laster}: {windowSize[laster]}, {key} : {windowSize[key]},</p> : null
                })
            }
        </React.Fragment>
    )
};

export default TestUseResize;