Nascent Personality Manifestation

npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

@zendeskgarden/container-buttongroup

0.1.8 • Public • Published

@zendeskgarden/container-buttongroup npm version

This package includes containers relating to button groups in the Garden Design System.

Installation

npm install @zendeskgarden/container-buttongroup

Usage

For live examples check out our storybook.

useButtonGroup

The useButtonGroup hook manages focus, selection and accessibility attributes required for a group of buttons. Garden uses this in react-components for the buttons package.

import { useButtonGroup } from '@zendeskgarden/container-buttongroup';
 
const ButtonGroup = () => {
  const [controlledSelectedItem, setSelectedItem] = useState();
  const { selectedItem, focusedItem, getButtonProps, getGroupProps } = useButtonGroup({
    selectedItem: controlledSelectedItem,
    onSelect: newSelectedItem => setSelectedItem(newSelectedItem)
  });
 
  return (
    <div {...getGroupProps()}>
      {buttons.map((button, index) => (
        <button
          {...getButtonProps({
            key: button,
            item: button,
            focusRef: buttonRefs[index],
            ref: buttonRefs[index],
            style: {
              boxShadow: button === focusedItem && 'inset 0 0 0 3px rgba(31,115,183, 0.35)',
              outline: 'none',
              color: button === selectedItem ? '#fff' : '#1f73b7',
              background: button === selectedItem && '#144a75',
              padding: '10px'
            }
          })}
        >
          {button}
        </button>
      ))}
    </div>
  );
};

ExampleContainer

ButtonGroupContainer is a render-prop wrapper for the useButtonGroup hook.

import { ButtonGroupContainer } from '@zendeskgarden/container-buttongroup';
 
<ButtonGroupContainer>
  {({ selectedItem, focusedItem, getButtonProps, getGroupProps }) => (
    <div {...getGroupProps()}>
      {buttons.map((button, index) => (
        <button
          {...getButtonProps({
            key: button,
            item: button,
            focusRef: buttonRefs[index],
            ref: buttonRefs[index],
            style: {
              boxShadow: button === focusedItem && 'inset 0 0 0 3px rgba(31,115,183, 0.35)',
              outline: 'none',
              color: button === selectedItem ? '#fff' : '#1f73b7',
              background: button === selectedItem && '#144a75',
              padding: '10px'
            }
          })}
        >
          {button}
        </button>
      ))}
    </div>
  )}
</ButtonGroupContainer>;

install

npm i @zendeskgarden/container-buttongroup

Downloadsweekly downloads

36

version

0.1.8

license

Apache-2.0

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability