feat: create useToggle hook

README.md

@@ -15,6 +15,7 @@
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/usehooks-ts)
 ![npm](https://img.shields.io/npm/v/usehooks-ts)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 [![All Contributors](https://img.shields.io/badge/all_contributors-85-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <br />
@@ -66,6 +67,7 @@
 - [`useStep()`](https://usehooks-ts.com/react-hook/use-step)
 - [`useTernaryDarkMode()`](https://usehooks-ts.com/react-hook/use-ternary-dark-mode)
 - [`useTimeout()`](https://usehooks-ts.com/react-hook/use-timeout)
+- [`useToggle()`](https://usehooks-ts.com/react-hook/use-toggle)
 - [`useUpdateEffect()`](https://usehooks-ts.com/react-hook/use-update-effect)
 - [`useWindowSize()`](https://usehooks-ts.com/react-hook/use-window-size)
 

package.json

@@ -29,7 +29,7 @@
     "test:watch": "npm run test -- --watch --silent",
     "test:coverage": "ts-node ./scripts/coverage.ts",
     "clean": "rimraf -rf ./dist",
-    "format": "prettier --check \"**/*.{json,md,mdx,css,scss,yaml,yml}\"",
+    "format": "prettier --write \"**/*.{json,md,mdx,css,scss,yaml,yml}\"",
     "lint": "eslint '**/*.{js,jsx,ts,tsx}'",
     "types-check": "tsc --noEmit",
     "bump": "bump --tag 'usehooks-ts@%s' --commit 'release: usehooks-ts@%s'",

src/index.ts

@@ -66,6 +66,8 @@ export { default as useTernaryDarkMode } from './useTernaryDarkMode/useTernaryDa
 export * from './useTernaryDarkMode/useTernaryDarkMode'
 export { default as useTimeout } from './useTimeout/useTimeout'
 export * from './useTimeout/useTimeout'
+export { default as useToggle } from './useToggle/useToggle'
+export * from './useToggle/useToggle'
 export { default as useUpdateEffect } from './useUpdateEffect/useUpdateEffect'
 export * from './useUpdateEffect/useUpdateEffect'
 export { default as useWindowSize } from './useWindowSize/useWindowSize'

src/useBoolean/useBoolean.mdx

@@ -4,3 +4,7 @@ date: '2021-07-29'
 ---
 
 A simple abstraction to play with a boolean, don't repeat yourself.
+
+Related hooks:
+
+- [`useToggle()`](/react-hook/use-toggle)

src/useCountdown/useCountdown.mdx

@@ -12,5 +12,6 @@ NEW VERSION: A simple countdown implementation. Accepts `countStop`(new), `count
 Related hooks:
 
 - [`useBoolean()`](/react-hook/use-boolean)
+- [`useToggle()`](/react-hook/use-toggle)
 - [`useCounter()`](/react-hook/use-counter)
 - [`useInterval()`](/react-hook/use-interval)

src/useToggle/useToggle.demo.tsx

@@ -0,0 +1,20 @@
+import { useToggle } from '..'
+
+export default function Component() {
+  const [value, toggle, setValue] = useToggle()
+
+  // Just an example to use "setValue"
+  const customToggle = () => setValue((x: boolean) => !x)
+
+  return (
+    <>
+      <p>
+        Value is <code>{value.toString()}</code>
+      </p>
+      <button onClick={() => setValue(true)}>set true</button>
+      <button onClick={() => setValue(false)}>set false</button>
+      <button onClick={toggle}>toggle</button>
+      <button onClick={customToggle}>custom toggle</button>
+    </>
+  )
+}

src/useToggle/useToggle.mdx

@@ -0,0 +1,10 @@
+---
+title: useToggle
+date: '2022-10-12'
+---
+
+A simple abstraction to play with a boolean, don't repeat yourself.
+
+Related hooks:
+
+- [`useBoolean()`](/react-hook/use-boolean)

src/useToggle/useToggle.test.ts

@@ -0,0 +1,59 @@
+import { act, renderHook } from '@testing-library/react-hooks/dom'
+
+import useToggle from './useToggle'
+
+describe('use toggle()', () => {
+  test('should use toggle be ok', () => {
+    const { result } = renderHook(() => useToggle())
+    const [value, toggle, setValue] = result.current
+
+    expect(value).toBe(false)
+    expect(typeof toggle).toBe('function')
+    expect(typeof setValue).toBe('function')
+  })
+
+  test('should default value works', () => {
+    const { result } = renderHook(() => useToggle(true))
+    const [value] = result.current
+
+    expect(value).toBe(true)
+  })
+
+  test('setValue should mutate the value', () => {
+    const { result } = renderHook(() => useToggle())
+    const [, , setValue] = result.current
+
+    expect(result.current[0]).toBe(false)
+
+    act(() => {
+      setValue(true)
+    })
+
+    expect(result.current[0]).toBe(true)
+
+    act(() => {
+      setValue(prev => !prev)
+    })
+
+    expect(result.current[0]).toBe(false)
+  })
+
+  test('toggle should mutate the value', () => {
+    const { result } = renderHook(() => useToggle())
+    const [, toggle] = result.current
+
+    expect(result.current[0]).toBe(false)
+
+    act(() => {
+      toggle()
+    })
+
+    expect(result.current[0]).toBe(true)
+
+    act(() => {
+      toggle()
+    })
+
+    expect(result.current[0]).toBe(false)
+  })
+})

src/useToggle/useToggle.ts

@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react'
+
+function useToggle(
+  defaultValue?: boolean,
+): [boolean, () => void, Dispatch<SetStateAction<boolean>>] {
+  const [value, setValue] = useState(!!defaultValue)
+
+  const toggle = useCallback(() => setValue(x => !x), [])
+
+  return [value, toggle, setValue]
+}
+
+export default useToggle

templates/plop/hooks/hook/demo.tsx.hbs

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { {{camelCase name}} } from '..'
 
 export default function Component() {

templates/plop/hooks/hook/hook.ts.hbs

@@ -1,5 +1,3 @@
-import {} from 'react'
-
 function {{camelCase name}}(): [number, () => number] {
 const value = 2
 const method = () => 2