@wsdm/ui-button-group

0.1.2 • Public • Published

Button Group Component

The button group is a purely functional component that makes little to no assumptions about style. It just provides a frame for groups of elements, of which one will have a selected state. This works equally well for button groups and tabs.

import ButtonGroup from "@wsdm/ui-button-group"

const buttonResetStyles = {
  WebkitAppearance: "none",
  fontFamily: "inherit",
  fontSize: "inherit",
  lineHeight: 1.25,
  padding: "1rem",
  border: "none",
  cursor: "pointer",
}

const getBackgroundColor = (a, b) => (a.key === b.key ? "#000" : "transparent")
const getTextColor = (a, b) => (a.key === b.key ? "#FFF" : "inherit")

const sampleButtons = [
  { key: "one", label: "Button One" },
  { key: "two", label: "Button Two" },
  { key: "three", label: "Button Three" },
  { key: "four", label: "Button Four" },
]

const Buttons = () => (
  <ButtonGroup start={sampleButtons[0]} onChange={tab => console.log(tab)}>
    {(activeButton, getButtonProps) => (
      <div>
        {sampleButtons.map(tab => (
          <button
            {...getButtonProps(tab)}
            style={{
              ...buttonResetStyles,
              backgroundColor: getBackgroundColor(tab, activeButton),
              color: getTextColor(tab, activeButton),
            }}
          >
            {tab.label}
          </button>
        ))}
      </div>
    )}
  </ButtonGroup>
)

Props

The following properties can be set on the <ButtonGroup /> component.

Name Type Default
indexKey String "key"
start Object null
onChange Func null
useInnerRef * Bool false

*useInnerRef is useful when using a glamorous component for the tabbing item.

ActiveButton

The first variable in the children function contains the entire object of the currently selected item. You can use this to set custom styles on your buttons/tabs. Its structure will depend on the structure of your data, but it will also add dimensions (left, right, width, height) to the current selected item.

getButtonProps

getButtonProps is a function that will allow you to create the properties necessary to wire up each button within the button group. You can pass these props to your button/tab using the spread operator.

Readme

Keywords

none

Package Sidebar

Install

npm i @wsdm/ui-button-group

Weekly Downloads

0

Version

0.1.2

License

LicenseRef-LICENSE

Unpacked Size

24.1 kB

Total Files

11

Last publish

Collaborators

  • lapidus
  • amytych
  • zimrick