feat(useToggleState): add useToggleState hook (#48)

* feat(useToggleState): add useToggleState hook

* Apply suggestions from code review

Co-authored-by: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>

Co-authored-by: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>

Author: jquense

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 its 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]
+}

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)
+  })
+})