# @kne/use-resize

> 当ref容器size发生变化时触发callback的react hooks

Latest version **0.1.1** (published 2024-09-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install @kne/use-resize
pnpm add @kne/use-resize
yarn add @kne/use-resize
bun add @kne/use-resize
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2024-09-11 |
| First published | 2024-09-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | linzp |
| Maintainers | metacoo, yangwang123456, juliewang, lingtong |

## Links

- npm: https://www.npmjs.com/package/@kne/use-resize
- Repository: https://github.com/kne-union/use-resize
- Homepage: https://www.kne-union.top/#/libs/UseResize
- Issues: https://github.com/kne-union/use-resize/issues
- npm.io page: https://npm.io/package/@kne/use-resize

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@kne/use-ref-callback](https://npm.io/package/@kne/use-ref-callback.md) ^0.1.2

## Recent versions

- 0.1.1 (latest) — 2024-09-11
- 0.1.0 — 2024-09-11
- 0.1.0-alpha.0 — 2024-09-11

## README

# use-resize


### 描述

当ref容器size发生变化时触发callback的react hooks


### 安装

```shell
npm i --save @kne/use-resize
```

### 示例


#### 示例样式

```scss
.container {
  width: 500px;
  background: var(--primary-color-1);
  text-align: center;
  padding: 20px;
}
```

#### 示例代码

- 这里填写示例标题
- 这里填写示例说明
- _UseResize(@kne/current-lib_use-resize),antd(antd)

```jsx
const {default: useResize} = _UseResize;
const {Button} = antd;
const {useState} = React;

const BaseExample = () => {
    const [height, setHeight] = useState(0);
    const ref = useResize((el) => {
        console.log('容器大小发生改变', el);
    });
    return <div className="container" ref={ref}>
        <div style={{
            marginBottom: height
        }}>我是一个容器
        </div>
        <Button onClick={() => {
            setHeight((height) => height + 10);
        }}>增加容器高度</Button>
    </div>;
};

render(<BaseExample/>);

```


### API

const ref = useResize(callback, options);

注意：返回的ref必须传给一个dom的ref

| 属性名      | 说明                                                            | 类型       | 默认值                              |
|----------|---------------------------------------------------------------|----------|----------------------------------|
| callback | 页面尺寸发生变化时执行的回调                                                | function |                                  |
| options  | 选填参数，isDebounce 是否使用防抖函数，否则使用节流，在 time 毫秒内最多执行 callback 一次的函数 | object   | { time: 500, isDebounce: false } |

---
_Source: https://npm.io/package/@kne/use-resize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._