Composition#

Bumbag allows you to flexibly build your own components on top of the Bumbag components using a set of composition techniques.

use prop#

You can pass a component to the use prop on any Bumbag component. This can be useful when you want to use a different component but still want to preserve the styling.

A common case could be rendering a link as a button:

<Button use="a">This is a link rendered as a button</Button>

You can even pass your own components to use:

<Box use={Link} href="#">This is a link</Box>

Hooks#

You can also use hooks to leverage Bumbag's components. Every Bumbag component comes with a useProps hook.

The first and only parameter to useProps are the props for the component.

function Example() {
  const buttonProps = Button.useProps({ palette: 'primary' });
  return (
    <a {...buttonProps} href="#">
      This is a link rendered as a button
    </a>
  );
}

Render props#

As an alternative to the useProps hook, every Bumbag component also accepts children as a function (render props).

<Button palette="primary">
  {buttonProps =>
    <a {...buttonProps} href="#">
      This is a link rendered as a button
    </a>
  }
</Button>