# use-hooks-react

> use hooks

Latest version **1.2.2** (published 2021-01-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install use-hooks-react
pnpm add use-hooks-react
yarn add use-hooks-react
bun add use-hooks-react
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2021-01-19 |
| First published | 2019-08-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | xlslucky |
| Maintainers | xlslucky |
| Keywords | react, hooks, use |

## Links

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

## 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

- 1.2.2 (latest) — 2021-01-19
- 1.2.1 — 2020-12-20
- 1.2.0 — 2020-06-19
- 1.1.9 — 2020-06-17
- 1.1.8 — 2020-06-17
- 1.1.7 — 2020-06-14
- 1.1.6 — 2020-06-12
- 1.1.5 — 2020-06-08
- 1.1.4 — 2020-06-08
- 1.1.3 — 2020-06-06
- 1.1.2 — 2020-03-31
- 1.1.1 — 2019-09-09
- 1.1.0 — 2019-09-09
- 1.0.9 — 2019-09-04
- 1.0.8 — 2019-08-23
- … 8 more at https://npm.io/package/use-hooks-react/versions

## README

# use-hooks-react

> This project is still in the test phase, use it carefully! 😈

## Install

```shell
$ npm install use-hooks-react
```

## Usage

```js
import { useModal, usePage, useResize, useSearch, useBasicResize } from 'use-hooks-react'

...
const [visible, current, openModal, closeModal] = useModal()
const [list, pageInfo, loading, setList, setPageInfo, setLoading] = usePage()
const [attribute] = useResize()
const [refresh, params, setRefresh, setParams] = useSearch()
const attribute = useBasicResize()
...
```

## Demo

#### useModal

```jsx
import { Modal, Button } from 'antd'
import { useModal } from 'use-hooks-react'

const InfoModal = props => {
  const { visble, onCancel, onOk, user = {} } = props
  return (
    <Modal
      visible={visble}
      title="info"
      onCancel={onCancel}
      onOk={onOk}
     >
      <p>name: {user.name}</p>
      <p>age: {user.age}</p>
   	</Modal>
  )
}

const UseModalDemo = () => {
  const [visible, current, openModal, closeModal] = useModal()
 
  const handleBtn = () => {
    openModal({
      name: 'Xlslucky'
      age: 24,
    })
  }
 
  return (
  	<>
      <Button onClick={handleBtn}>
        Show UserInfo
      </Button>
      <InfoModal
        user={current}
        onCancel={closeModal}
        onOk={() => {}}
      />
    </>
  )
}

export default UseModalDemo
```

#### usePage & useSearch

```jsx
import { Button, Input } from 'antd'
import { useEffect } from 'react'
import { usePage } from 'use-hooks-react'

const UsePageDemo = () => {
  const [list, , loading, setList, , setLoading] = usePage()
  const [refresh, params, setRefresh, setParams] = useSearch({ name: '' }, true)
 
  useEffect(() => {
    const getList = async () => {
      setLoading(true)
      const url = `https://api.github.com/users?xxx=${params.name}`
      const data = await window.fetch(url).then(resp => resp.json())
      setList(data)
      setLoading(false)
      setRefresh(false)
  	}
    
    if (refresh) {
      getList()
    }
  }, [refresh])
  
  const onSubmit = e => {
    e.preventDefault()
    setRefresh(true)
  }
 
  const onChangeInput = name => ({ target }) => {
    setParams({
      [name]: target.value,
    })
  }

  return (
    <>
      <form onSubmit={onSubmit}>
        <Input value={params.name} onChange={onChangeInput('name')} />
        <Button htmlType="submit">Submit</Button>
      </form>
      <div>
        {
          loading ?
            'loading...'
            :
            list.map(item => <div>{item.login}</div>)
        }
      </div>
    </>
  )
}

export default UsePageDemo
```

#### useResize | useBasicResize

```jsx
import { useResize } from 'use-hooks-react'

const UseResizeDemo = () => {
  const [attribute] = useResize()
  const basicAttribute = useBasicResize()
  
  return (
  	<>
      <p>bodyClientWidth: {attribute.bodyClientWidth}</p>
      <p>bodyClientHeight: {attribute.bodyClientHeight}</p>
      ...
      <p>bodyClientWidth: {basicAttribute.bodyClientWidth}</p>
      <p>bodyClientHeight: {basicAttribute.bodyClientHeight}</p>
    </>
  )
}

export default UseResizeDemo
```

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