Add useToggle hook to react-hooks (#1220)

packages/react-hooks/CHANGELOG.md

@@ -7,6 +7,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## [Unreleased] -->
 
+- Added `useToggle` hook ([#1220](https://github.com/Shopify/quilt/pull/1220))
+
 ## [1.3.0] - 2019-10-29
 
 - Added a `usePrevious` hook ([#1145](https://github.com/Shopify/quilt/pull/1145))

packages/react-hooks/README.md

@@ -102,3 +102,28 @@ function Score({value}) {
   );
 }
 ```
+
+### `useToggle()`
+
+This hook will provide an object that contains a boolean state value and a set of memoised callbacks to toggle it, force it to true and force it to false. It accepts one argument that is the initial value of the state. This is useful for toggling the active state of modals and popovers.
+
+```tsx
+function MyComponent() {
+  const {
+    value: isActive,
+    toggle: toggleIsActive,
+    setTrue: setIsActiveTrue,
+    setFalse: setIsActiveFalse,
+  } = useToggle(false);
+  const activeText = isActive ? 'true' : 'false';
+
+  return (
+    <>
+      <p>Value: {activeText}</p>
+      <button onClick={toggleIsActive}>Toggle isActive state</button>
+      <button onClick={setIsActiveTrue}>Set isActive state to true</button>
+      <button onClick={setIsActiveFalse}>Set isActive state to false</button>
+    </>
+  );
+}
+```

packages/react-hooks/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export {useLazyRef} from './lazy-ref';
-export {default as useTimeout} from './timeout';
-export {default as useOnValueChange} from './on-value-change';
 export {useMountedRef} from './mounted-ref';
-export {default as usePrevious} from './previous';
+export {useOnValueChange} from './on-value-change';
+export {usePrevious} from './previous';
+export {useTimeout} from './timeout';
+export {useToggle} from './toggle';

packages/react-hooks/src/hooks/on-value-change.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function useOnValueChange<T>(
+export function useOnValueChange<T>(
   value: T,
   onChange: (value: T, oldValue: T) => void,
 ) {

packages/react-hooks/src/hooks/previous.ts

@@ -1,6 +1,6 @@
 import {useRef, useEffect} from 'react';
 
-export default function usePrevious<T>(value: T) {
+export function usePrevious<T>(value: T) {
   const ref = useRef<T>();
   useEffect(() => {
     ref.current = value;

packages/react-hooks/src/hooks/tests/on-value-change.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {mount} from '@shopify/react-testing';
 
-import useOnValueChange from '../on-value-change';
+import {useOnValueChange} from '../on-value-change';
 
 describe('useOnValueChnge', () => {
   function MockComponent({value, spy}) {

packages/react-hooks/src/hooks/tests/previous.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {mount} from '@shopify/react-testing';
 
-import usePrevious from '../previous';
+import {usePrevious} from '../previous';
 
 describe('usePrevious', () => {
   function Score({value}) {

packages/react-hooks/src/hooks/tests/timeout.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {mount} from '@shopify/react-testing';
 import {timer} from '@shopify/jest-dom-mocks';
 
-import useTimeout from '../timeout';
+import {useTimeout} from '../timeout';
 
 describe('useTimeout', () => {
   function MockComponent({spy, delay}) {

packages/react-hooks/src/hooks/tests/toggle.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {mount} from '@shopify/react-testing';
+
+import {useToggle} from '../toggle';
+
+describe('useToggle', () => {
+  function MockComponent({initialValueIsTrue = false}) {
+    const {value, toggle, setTrue, setFalse} = useToggle(initialValueIsTrue);
+
+    const activeText = value ? 'true' : 'false';
+
+    return (
+      <>
+        <p>Value: {activeText}</p>
+        <button type="button" id="toggle" onClick={toggle} />
+        <button type="button" id="forceTrue" onClick={setTrue} />
+        <button type="button" id="forceFalse" onClick={setFalse} />
+      </>
+    );
+  }
+
+  it('starts with an initial value', () => {
+    const wrapperInitallyFalse = mount(<MockComponent />);
+    expect(wrapperInitallyFalse).toContainReactText('Value: false');
+
+    const wrapperInitallyTrue = mount(<MockComponent initialValueIsTrue />);
+    expect(wrapperInitallyTrue).toContainReactText('Value: true');
+  });
+
+  it('toggles the value when the toggle callback is triggered', () => {
+    const wrapper = mount(<MockComponent />);
+    expect(wrapper).toContainReactText('Value: false');
+
+    wrapper.find('button', {id: 'toggle'}).trigger('onClick');
+    expect(wrapper).toContainReactText('Value: true');
+
+    wrapper.find('button', {id: 'toggle'}).trigger('onClick');
+    expect(wrapper).toContainReactText('Value: false');
+  });
+
+  it('forces the value to true when the forceTrue callback is triggered', () => {
+    const wrapper = mount(<MockComponent />);
+    expect(wrapper).toContainReactText('Value: false');
+
+    wrapper.find('button', {id: 'forceTrue'}).trigger('onClick');
+    expect(wrapper).toContainReactText('Value: true');
+
+    wrapper.find('button', {id: 'forceTrue'}).trigger('onClick');
+    expect(wrapper).toContainReactText('Value: true');
+  });
+
+  it('forces the value to false when the forceFalse callback is triggered', () => {
+    const wrapper = mount(<MockComponent initialValueIsTrue />);
+    expect(wrapper).toContainReactText('Value: true');
+
+    wrapper.find('button', {id: 'forceFalse'}).trigger('onClick');
+    expect(wrapper).toContainReactText('Value: false');
+
+    wrapper.find('button', {id: 'forceFalse'}).trigger('onClick');
+    expect(wrapper).toContainReactText('Value: false');
+  });
+});

packages/react-hooks/src/hooks/timeout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function useTimeout(callback: () => void, delay: number) {
+export function useTimeout(callback: () => void, delay: number) {
   React.useEffect(() => {
     const id = setTimeout(callback, delay);
     return () => clearTimeout(id);

packages/react-hooks/src/hooks/toggle.ts

@@ -0,0 +1,16 @@
+import {useState, useCallback} from 'react';
+
+/**
+ * Returns a stateful value, and a set of memoized functions to toggle it,
+ * set it to true and set it to false
+ */
+export function useToggle(initialState: boolean) {
+  const [value, setState] = useState(initialState);
+
+  return {
+    value,
+    toggle: useCallback(() => setState(state => !state), []),
+    setTrue: useCallback(() => setState(true), []),
+    setFalse: useCallback(() => setState(false), []),
+  };
+}