From d8665a4e78d32e69021e72701a897f6c4ebbf054 Mon Sep 17 00:00:00 2001
From: Jason Quense <monastic.panic@gmail.com>
Date: Wed, 19 May 2021 10:19:16 -0400
Subject: [PATCH 1/2] feat(useToggleState): add useToggleState hook

---
 src/useToggleState.ts        | 31 +++++++++++++++++++++++++++++++
 test/useToggleState.test.tsx | 31 +++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/useToggleState.ts
 create mode 100644 test/useToggleState.test.tsx

diff --git a/src/useToggleState.ts b/src/useToggleState.ts
new file mode 100644
index 0000000..097fb8d
--- /dev/null
+++ b/src/useToggleState.ts
@@ -0,0 +1,31 @@
+import { useReducer, Reducer } from 'react'
+
+/**
+ * Create a state setter pair for a boolean value that can be "switched"
+ * Unlike `useState(false)`, `useToggleState` will automatically flip the state
+ * value when it's setter is called with no argument.
+ *
+ * @param initialState THe initial boolean value
+ * @returns A tuple of the current state and a setter
+ *
+ * ```jsx
+ * const [show, toggleShow] = useToggleState(false)
+ *
+ * return (
+ *   <>
+ *     <button onClick={() => toggleShow()}>
+ *       Toggle
+ *     <button>
+ *
+ *     {show && <strong>Now you can see me</strong>}
+ *   </>
+ * )
+ *
+ * ```
+ */
+export default function useToggleState(initialState: boolean = false) {
+  return useReducer<Reducer<boolean, boolean | undefined>>(
+    (state: boolean, action?: boolean) => (action == null ? !state : action),
+    initialState,
+  ) as [boolean, (value?: boolean) => void]
+}
diff --git a/test/useToggleState.test.tsx b/test/useToggleState.test.tsx
new file mode 100644
index 0000000..08028ea
--- /dev/null
+++ b/test/useToggleState.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { act } from 'react-dom/test-utils'
+import useToggleState from '../src/useToggleState'
+
+describe('useToggleState', () => {
+  it('should toggle', () => {
+    let toggleState: ReturnType<typeof useToggleState>
+
+    function Wrapper({ initial }: { initial?: boolean }) {
+      toggleState = useToggleState(initial)
+      return <span />
+    }
+
+    const wrapper = mount(<Wrapper />)
+
+    expect(toggleState![0]).toEqual(false)
+
+    act(() => toggleState[1]())
+
+    expect(toggleState![0]).toEqual(true)
+
+    act(() => toggleState[1](true))
+
+    expect(toggleState![0]).toEqual(true)
+
+    act(() => toggleState[1]())
+
+    expect(toggleState![0]).toEqual(false)
+  })
+})

From 82cf048d06af3617159ce7cd9d6764676e90fc06 Mon Sep 17 00:00:00 2001
From: Jason Quense <monastic.panic@gmail.com>
Date: Wed, 19 May 2021 12:44:14 -0400
Subject: [PATCH 2/2] Apply suggestions from code review

Co-authored-by: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>
---
 src/useToggleState.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/useToggleState.ts b/src/useToggleState.ts
index 097fb8d..e69ba86 100644
--- a/src/useToggleState.ts
+++ b/src/useToggleState.ts
@@ -1,11 +1,11 @@
 import { useReducer, Reducer } from 'react'
 
 /**
- * Create a state setter pair for a boolean value that can be "switched"
+ * Create a state setter pair for a boolean value that can be "switched".
  * Unlike `useState(false)`, `useToggleState` will automatically flip the state
- * value when it's setter is called with no argument.
+ * value when its setter is called with no argument.
  *
- * @param initialState THe initial boolean value
+ * @param initialState The initial boolean value
  * @returns A tuple of the current state and a setter
  *
  * ```jsx