https://github.com/gxlmyacc/react-closure-hooks
https://github.com/gxlmyacc/react-closure-hooks
closure hooks react react-hook use-event use-state use-state-with-promise
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gxlmyacc/react-closure-hooks
- Owner: gxlmyacc
- License: mit
- Created: 2022-06-16T07:57:42.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-20T08:40:47.000Z (over 2 years ago)
- Last Synced: 2025-07-03T12:05:52.456Z (12 months ago)
- Topics: closure, hooks, react, react-hook, use-event, use-state, use-state-with-promise
- Language: JavaScript
- Homepage:
- Size: 279 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-closure-hooks
reexport react hooks, and add `useEvent`. They are useful for solving the closure problem in react hooks.
[](https://npmjs.com/package/react-closure-hooks)
[](https://npmjs.com/package/react-closure-hooks)
## install
```bash
npm install --save react-closure-hooks
```
or
```bash
yarn add react-closure-hooks
```
## usage
```js
// Test
import React from 'react';
import { Search } from 'antd';
import { useState, useEvent } from 'react-closure-hooks';
import API from '@/request';
const Test = () => {
const [searchKey, setSearchKey] = useState('');
const [result, setResult] = useState('');
const doQuery = useEvent(async () => {
const result = await API.query({
searchKey
});
setResult(result);
});
const doSearch = useEvent(async (e) => {
await setSearchKey(e.target.value);
doQuery();
});
return (
{result}
);
};
export default Test;
```
or use `useStateWithPromise`
```js
// Test
import React, { useState } from 'react';
import { Search } from 'antd';
import { useStateWithPromise, useEvent } from 'react-closure-hooks';
import API from '@/request';
const Test = () => {
const [searchKey, setSearchKey] = useStateWithPromise('');
const [result, setResult] = useState('');
const doQuery = useEvent(async () => {
const result = await API.query({
searchKey
});
setResult(result);
});
const doSearch = useEvent(async (e) => {
await setSearchKey(e.target.value);
doQuery();
});
return (
{result}
);
};
export default Test;
```
## License
[MIT](./LICENSE)