@gdo-bzh/use-toggle-button-group-state

use-toggle-button-group-state

React hook managing the state of a toggle button group. A toggle group is used to group related options under a common container. Only one option in a group of buttons can be selected and active at a time. Selecting one option deselects any other. It strictly acts like a radio-button group. the toggle group state makes it clear which button is active.

Install

yarn add @gdo-bzh/use-toggle-button-group-state react
# or
npm install --save @gdo-bzh/use-toggle-button-group-state react

Usage

import React from 'react'

import { UseToggleButtonState } from '@gdo-bzh/use-toggle-button-group-state'

const Example = () => {
  const { handleSelect, currentSelectedId } = useToggleButtonGroupState({
    selectedId: 'first'
  })

  const onButtonClick = event => console.log(event.currentTarget.name)

  return (
    <div>
      <button
        type="button"
        name="first"
        className={currentSelectedId === 'first' ? 'button button--selected' : 'button'}
        onClick={handleSelect(onButtonClick)}
      >
        First
      </button>
      <button
        type="button"
        name="second"
        className={currentSelectedId === 'second' ? 'button button--selected' : 'button'}
        onClick={handleSelect(onButtonClick)}
      >
        Second
      </button>
    </div>
  )
}

Types

type CallbackFunctionVariadic = (...args: any[]) => void

type State = {
  /**
   * default selected button id. If not set, no element is selected by default.
   */
  selectedId?: string
  /**
   * the key attribute used to uniquely resolve each toggle-button. The default value is 'name'
   */
  attributeId?: string
}

type ClickHandler = (callback: CallbackFunctionVariadic) => React.ReactEventHandler<HTMLElement>

type UseToggleButtonGroupState = (
  initialState?: State
) => {
  /**
   * selection handler. It accepts as single parameter, the specific action attached to the button click event.
   */
  handleSelect: ClickHandler
  /**
   * current selected button id
   */
  currentSelectedId: State['selectedId']
  /**
   * reset selection
   */
  reset: () => void
}

License

MIT © gdo-bzh