This package has been deprecated

Author message:

prefer @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 # github package registry
yarn add use-toggle-button-group-state # npmjs registry
# or
npm install --save @gdo-bzh/use-toggle-button-group-state # github package registry
npm install --save use-toggle-button-group-state # npmjs registry

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
        type="button">
       <button
        type="button"
        name="second"
        className={currentSelectedId === "second" ? 'button button--selected':'button'}
        onClick={handleSelect(onButtonClick)}
      >
        Second
      </button
        type="button">
    </div>
  )
}

Api

parameters:

• attributeId? [string]: the key attribute used to uniquely resolve each toggle-button. The default value is 'name'.
• selectedId? [string]: default selected button id. This parameter is optional.

returns:

• currentSelectedId [string] : current selected button id
• handleSelect [(fn:React.MouseEventHandler)=>void]: toggle button click handler. It accepts as single parameter, the specific action attached to the button click event.

License

MIT © gdo-bzh