A composition protocol for JSX

Put behavior on the element, not around it.

JSX Traits gives React elements an ordered, typed pipeline of plain functions with colocated, namespaced configuration.

Three traits

Small behaviors. Useful combinations.

Button behavior on an anchor

<traits.a of={[{ button }]} button:color="violet" href="/docs/">
  Get started
</traits.a>

Get started

Button behavior belongs to the anchor without changing its semantics.

Button with a tooltip

<traits.a
  of={[{ button }, { tooltip }]}
  button:color="violet"
  tooltip:content="Read the documentation"
  tooltip:id="docs-tooltip"
  href="/docs/"
>
  Get started
</traits.a>

Get started

The tooltip adds real markup and adopts the button color from symbol-keyed metadata.

Truncated text with a tooltip

<traits.span
  of={[{ truncate }, { tooltip }]}
  truncate:lines={1}
  tooltip:id="project-name-tooltip"
>
  A very long project name that will not fit
</traits.span>

A very long project name that will not fit

The tooltip reuses the original children published by the truncate trait.