Skip to main content

useIsIndeterminate

A hook for determining whether a Checkbox group has an indeterminate state.

View source

Import

import { useIsIndeterminate } from '@pluralsight/react'

interface CheckboxGroup {
  [k: string]: boolean
}

useIsIndeterminate(group: CheckboxGroup)

Reference

Call useIsIndeterminate at the Effect level of the component in which you wish to determine the state of a Checkbox group:

function Form() {
  const [allSelected, setAllSelected] = useState(false)
  const [checkboxGroup, setCheckboxGroup] = useState({
    one: false,
    two: false,
    three: false
  })
  const isIndeterminate = useIsIndeterminate(checkboxGroup)

Parameters

  • checkboxGroup: an Object containing the available Checkbox items in a group containing Boolean values describing thier "checked" state.

Returns

This hook returns a Boolean value representing if the group is indeterminate.

Troubleshooting

My hook only returns false even though my Checkboxes are updating in the browser

Make sure you are passing in the correct type of state of an Object containg property names that match the selector of choice you are using for the Checkboxes "checked" state with a Boolean value.

Likewise, make sure you are passing in an Object created from the useState hook to ensure the checkboxGroup parameter is actually changing with the UI.