# @lucascv/box-resizer

> 可自由拖动边框调整容器大小的插件式组件，支持自定义可拖动调整的方向

Latest version **1.0.8** (published 2022-11-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lucascv/box-resizer
pnpm add @lucascv/box-resizer
yarn add @lucascv/box-resizer
bun add @lucascv/box-resizer
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-11-20 |
| First published | 2022-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Lucas |
| Maintainers | lucascv |
| Keywords | resizer, divResizer, boxResizer, containerResizer, 调整容器大小, reactResizer |

## Links

- npm: https://www.npmjs.com/package/@lucascv/box-resizer
- Repository: https://github.com/GitHubJackson/box-resizer
- Issues: https://github.com/GitHubJackson/box-resizer/issues
- npm.io page: https://npm.io/package/@lucascv/box-resizer

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.3.2

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2022-11-20
- 1.0.7 — 2022-11-20
- 1.0.6 — 2022-11-19
- 1.0.5 — 2022-11-14
- 1.0.4 — 2022-11-13
- 1.0.3 — 2022-11-09
- 1.0.2 — 2022-11-09
- 1.0.1 — 2022-11-09
- 1.0.0 — 2022-11-08

## README

# box-resizer

这是一个可通过鼠标拖拽，从各个方向来调整容器大小的组件

[在线预览](https://blog.zhouweibin.top/lab/box-resizer)

### 安装

```
yarn add @lucascv/box-resizer
// npm install @lucascv/box-resizer
```

### 使用

直接将组件 BoxResizer 放入需要调整的容器中即可，假设容器组件是 Box

```
// hook中使用
import { BoxResizer } from '@lucascv/box-resizer';
...
const boxRef = useRef<HTMLDivElement|null>(null);

return (
  ...
  <Box ref={boxRef}>
    <BoxResizer boxRef={boxRef}/>
  <Box/>
  ...
)
...
```

### 注意事项

容器暂且需要绝对定位、固定宽高，适用于给弹框类组件套壳

```
.Container {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  // NOTE: 以上为必备属性
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: aquamarine;
}
```

### API

| 属性     | 说明                                 | 类型                              | 默认值 | 版本 |
| -------- | ------------------------------------ | --------------------------------- | ------ | ---- |
| boxRef   | 必选。容器 ref，用于获取容器样式属性 | React.ref                         |        |
| config   | 可选。容器的一些配置                 | IConfig                           |        |
| onChange | 可选。容器改动后的回调               | (modalStyle: IModalStyle) => void |        |

config：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| minWidth | 可选。最小宽度 | number | 300 |
| maxWidth | 可选。最大宽度 | number | 800 |
| minHeight | 可选。最小高度 | number | 200 |
| maxHeight | 可选。最大高度 | number | 600 |
| resizeDirection | 可选。指定可缩放的边框，默认全部放开 | TResizeDirection | 全部 |

```typescript
type TResizeDirection =
  | 'right'
  | 'left'
  | 'top'
  | 'bottom'
  | 'lt'
  | 'lb'
  | 'rt'
  | 'rb';
```

### Todo

1.x

- [x] 上下左右拖动调整
- [x] 斜方向四个角度拖动调整
- [x] 宽高边缘限制

  2.x

- [ ] 放开容器限制，比如绝对布局/宽高
- [ ] 性能优化，拖动节流和引入 mutationObserver
- [ ] 体验优化

### 其他

该项目会持续优化，欢迎提 issues.

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