# utils-hooks

> 基于React的hooks

Latest version **0.0.78** (published 2020-07-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install utils-hooks
pnpm add utils-hooks
yarn add utils-hooks
bun add utils-hooks
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.78 |
| Published | 2020-07-14 |
| First published | 2019-03-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | XueYou |
| Maintainers | xueyou2000 |
| Keywords | react, hooks |

## Links

- npm: https://www.npmjs.com/package/utils-hooks
- Repository: https://github.com/xueyou2000/utils-hooks
- Homepage: https://github.com/xueyou2000/utils-hooks#readme
- Issues: https://github.com/xueyou2000/utils-hooks/issues
- npm.io page: https://npm.io/package/utils-hooks

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.78 (latest) — 2020-07-14
- 0.0.77 — 2020-01-10
- 0.0.76 — 2020-01-10
- 0.0.75 — 2019-11-05
- 0.0.74 — 2019-11-05
- 0.0.73 — 2019-10-25
- 0.0.72 — 2019-09-09
- 0.0.71 — 2019-05-12
- 0.0.70 — 2019-05-12
- 0.0.69 — 2019-05-11
- 0.0.68 — 2019-05-10
- 0.0.67 — 2019-05-09
- 0.0.66 — 2019-05-09
- 0.0.65 — 2019-04-24
- 0.0.64 — 2019-04-23
- … 29 more at https://npm.io/package/utils-hooks/versions

## README

# utils-hooks

---

[![NPM version][npm-image]][npm-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/utils-hooks.svg?style=flat-square
[npm-url]: http://npmjs.org/package/utils-hooks
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/utils-hooks.svg?style=flat-square
[download-url]: https://npmjs.org/package/utils-hooks

> 提供通用`hooks`

## useControll

提供受控组件和非受控组件, 双向绑定的实现

```tsx
function Checkbox(props) {
    // ...
    const [checked, setChecked, isControll] = useControll(props, "checked", "defaultChecked");
    // ...
}
```

## useMedia

提供媒体查询功能, 核心使用到了`window.matchMedia`接口

```tsx
// min-width: 1500px -> count === 5
// min-width: 1000px -> count === 4
// min-width: 600px -> count === 3
// 不匹配媒体查询则使用默认值 count === 2
const count = useMedia(["(min-width: 1500px)", "(min-width: 1000px)", "(min-width: 600px)"], [5, 4, 3], 2);
```

## useContainer

封装获取 dom 元素方法, 如果提供参数, 则默认再 body 内创建一个 div 作为容器.

> 一般用于弹出组件

```tsx
const container = useContainer();
```

## usePortal

封装`useContainer`, 并使用`ReactDOM.createPortal`渲染弹出内容

```tsx
function Model() {
    const renderPortal = usePortal();

    return renderPortal(
        <div>
            <h1>我是弹出框</h1>
        </div>
    );
}
```

## useTranstion

监听过度动画状态.

```tsx
import useTranstion, { UNMOUNTED, ENTERING, ENTERED, EXITING, EXITED } from "utils-hooks/es/useTranstion";

function App() {
    // 是否可见, 切换此状态来改变是否 state
    const [visible] = useState(false);
    const [ref, state] = useTranstion(visible);
    // 默认状态 state == UNMOUNTED

    return <div ref={ref}>有过度css的元素</div>;
}
```

## useObserverScroll

监听元素滚动事件, 封装了滚动方向

```tsx
useObserverScroll((event, down) => {
    console.log(`向${down ? "下" : "上"}滚动了`);
});
```

## useGlobalState

监听全局数据

```tsx
import { MonitorState, MonitorStateTest } from "utils-hooks";
const countStore = new MonitorState(0);

export function MonitorStateTest() {
    const [count, setCount] = useGlobalState<number>(countStore);

    return (
        <div>
            当前count: {count}
            <button onClick={() => setCount(count + 1)}>增加</button>
            <button onClick={() => setCount(count - 1)}>减少</button>
        </div>
    );
}
```

## useOutsideClick

监听空白处点击

```tsx
var div = document.getById("abc");
useOutsideClick([div], () => {
    console.log("点击到空白处了");
});
```

## useTrigger

监听触发器

```tsx
function app() {
    const ref = useTrigger(["click"], ["click"], (actived) => {
        console.log(actived ? "激活了" : "取消激活");
    });

    return <div ref={ref} />;
}
```

## useDebounce

防抖函数

```tsx
function app() {
    const [searchTerm, setSearchTerm] = useState("");
    const debouncedSearchTerm = useDebounce(searchTerm, 500);
    const [isSearching, setIsSearching] = useState(false);
    const [results, setResults] = useState([]);

    // Effect for API call
    useEffect(() => {
        if (debouncedSearchTerm) {
            setIsSearching(true);
            searchCharacters(debouncedSearchTerm).then((results) => {
                setIsSearching(false);
                setResults(results);
            });
        } else {
            setResults([]);
        }
    }, [debouncedSearchTerm]); // Only call effect if debounced search term changes

    return (
        <div>
            <input placeholder="Search Marvel Comics" onChange={(e) => setSearchTerm(e.target.value)} />
            {isSearching && <div>Searching ...</div>}
        </div>
    );
}
```

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