CM2: Composition

[matheusps]

Shoreline composition

Composition is often useful for easily extending behavior. Shoreline relies on the children's property for this task. Composable components accept the asChild boolean property. When true, the component will not render its default DOM element, cloning the props to the first child instead. The recipe is:

<Component asChild>
  <div>...</div>
</Component>

For example, the Collapsible component has a composable CollapsibleTrigger:

function Example() {
  return (
    <CollapsibleProvider>
      <CollapsibleTrigger asChild>
        <button>Toggle</button>
      </CollapsibleTrigger>
      <CollapsibleContent>content</CollapsibleContent>
    </CollapsibleProvider>
  )
}

Caveats

Not all components are composable

The composition will not be present in every component of Shoreline. This decision was made to keep the simplicity of the components itself. When available, it will be documented.

Custom components must be extendable

To be cloned and extended, custom components must be extendable. The two requirements for this are:

1. It needs to forward a ref.
2. It must have spread props. Ex: const Component = (props) => (<button {...props} />)

References

This API takes inspiration from:

1. Radix
2. Ariakit

[anitavincent]

In your opinion what kind of use case do you imagine people using/needing this behaviour?

[matheusps]

Triggers are a good example. Collapsible, ModalButton, MenuButton, MenuItem (in the case of submenus), ToolbarButton, etc.

Example 1: MenuButton

<>
  <MenuButton asChild>
    <a href="">This links opens the Menu</a>
  </MenuButton>
  <Menu>
    <MenuItem>Delete</MenuItem>
  </Menu>
</>

Example 2: Toolbar

<Toolbar>
  <ToolbarItem asChild>
    <button>custom button</butto>
  </ToolbarItem>
  {/ * ... */}
</Toolbar>