1.0.6 • Published 2 years ago

@zendeskgarden/container-buttongroup v1.0.6

Weekly downloads
5,708
License
Apache-2.0
Repository
github
Last release
2 years ago

@zendeskgarden/container-buttongroup npm version

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

Installation

npm install @zendeskgarden/container-buttongroup

Usage

Check out storybook for live examples.

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>;
1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.2

2 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.3.17

3 years ago

0.3.18

3 years ago

0.3.16

3 years ago

0.3.15

4 years ago

0.3.14

4 years ago

0.3.13

4 years ago

0.3.12

4 years ago

0.3.10

4 years ago

0.3.9

4 years ago

0.3.8

4 years ago

0.3.7

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.8

5 years ago

0.2.7

5 years ago

0.2.6

6 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.11

6 years ago

0.1.10

6 years ago

0.1.9

6 years ago

0.1.8

6 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago