feat: add useCheckbox

Co-authored-by: Ivan Dimanov <[email protected]>

__tests__/dataEntry.test.js

@@ -3,7 +3,9 @@ import React from 'react'
 import {
   render, fireEvent,
 } from 'react-testing-library'
-import { useField } from '../src/index'
+import {
+  useField, useCheckbox,
+} from '../src/index'
 
 test('useField', () => {
   const Input = () => {
@@ -24,3 +26,23 @@ test('useField', () => {
   fireEvent.click(getByText('reset'))
   expect(container.firstChild.firstChild.textContent).toBe('Type Here...')
 })
+
+test('useCheckbox', () => {
+  const Input = () => {
+    const { checked, bind, reset } = useCheckbox(false)
+
+    return (
+      <div>
+        <span>{String(checked)}</span>
+        <button onClick={reset}>reset</button>
+        <input type="checkbox" {...bind} />
+      </div>
+    )
+  }
+  const { container, getByText } = render(<Input />)
+  expect(container.firstChild.firstChild.textContent).toBe('false')
+  fireEvent.click(container.firstChild.lastChild)
+  expect(container.firstChild.firstChild.textContent).toBe('true')
+  fireEvent.click(getByText('reset'))
+  expect(container.firstChild.firstChild.textContent).toBe('false')
+})

src/hooks/useCheckbox.js

@@ -0,0 +1,17 @@
+import { useState } from 'react'
+
+const useCheckbox = (initial) => {
+  const [checked, set] = useState(initial)
+
+  return {
+    checked,
+    set,
+    reset: () => set(initial),
+    bind: {
+      checked,
+      onChange: e => set(e.target.checked),
+    },
+  }
+}
+
+export default useCheckbox

src/index.js

@@ -16,6 +16,8 @@ export { default as useMap } from './hooks/useMap'
 
 export { default as useField } from './hooks/useField'
 
+export { default as useCheckbox } from './hooks/useCheckbox'
+
 export { default as useFetch } from './hooks/useFetch'
 
 export { default as useMergeState } from './hooks/useMergeState'

stories/dataEntry.stories.js

@@ -36,3 +36,21 @@ storiesOf(section('useField'), module)
   )
   
 `)
+
+storiesOf(section('useCheckbox'), module)
+  .addLiveSource('demo', `
+ const Checkbox = () => {
+   const { checked, bind } = useCheckbox(false)
+
+   return (
+     <div>
+       is checked:
+       {String(checked)}
+       <input type="checkbox" {...bind} />
+     </div>
+   )
+ }
+ return (
+   <Checkbox />
+ )
+`)