@zendeskgarden/container-buttongroup
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.12 • 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

    7,297

    Version

    0.3.12

    License

    Apache-2.0

    Unpacked Size

    33.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • zendesk-garden