# react-use-toggle-hook

> React hook for boolean state

Latest version **1.0.8** (published 2023-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-toggle-hook
pnpm add react-use-toggle-hook
yarn add react-use-toggle-hook
bun add react-use-toggle-hook
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-05-31 |
| First published | 2021-07-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Piotr Pliszczynski |
| Maintainers | fookoo |
| Keywords | react, hook, state, boolean |

## Links

- npm: https://www.npmjs.com/package/react-use-toggle-hook
- Repository: https://github.com/fookoo/react-use-toggle-hook
- npm.io page: https://npm.io/package/react-use-toggle-hook

## 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.0.8 (latest) — 2023-05-31
- 1.0.7 — 2023-01-10
- 1.0.6 — 2022-12-27
- 1.0.5 — 2022-12-27
- 1.0.4 — 2022-12-27
- 1.0.2 — 2022-06-24
- 1.0.1 — 2022-06-24
- 1.0.0 — 2021-07-28

## README

# React useToggle

useToggle is just a useState dedicated for boolean type. 

It comes with toggle method as well as direct on / off and open / close 

## Getting started

```
yarn add react-use-toggle-hook
```

## Usage
useToggle hook returns
```jsx
interface UseToggleResponse {
  value: boolean
  toggle: () => void
  on: () => void
  off: () => void
  open: () => void
  close: () => void
  doAndClose: (callback: () => void | Promise<void>) => void
}
```


```jsx
import React, { useState, useEffect } from 'react'
import { useToggle } from 'react-use-toggle-hook'

export const CollapsableSection: React.FC = () => {
    const { value, toggle, close } = useToggle();
        
    return (<section className={value ? 'collapse' : 'expand'}>
        <h1 onClick={toggle}>Title</h1>
        <button type="button" onClick={close}>x</button>
        <div className="content">
          <p>Lorem ipsum ..</p>
        </div>
    </section>)
}
```

## Multiple instance at ones

```jsx
import React, { useState, useEffect } from 'react'
import { useToggle } from 'react-use-toggle-hook'

export const CollapsableSection: React.FC = () => {
    const { value: isDisabled, toggle: toggleDisabled, close: disable } = useToggle();
    const { value: isReadonly, on: setReadonly, off: setWritable } = useToggle();
        
    return (<section>
      <input disabled={isDisabled} readOnly={isReadonly} />
    </section>)
}
```

## Do And Close

This method will call passed callback either its simple function or async function and after its done will set toggle value to false

```jsx
import React, { useState, useEffect } from 'react'
import { useToggle } from 'react-use-toggle-hook'

export const Modal: React.FC = ({ onClose }) => {
    const { value, doAndClose } = useToggle(false);
    
    const save = useCallback(() => fetch('/my-api/save'), [])
    
    return (<div>
      <button onClick={doAndClose(save)}>Save</button>
    </div>)
}
```

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