JSX Traits

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.

Get startedView source

The model

Explicit order. Isolated options.

Traits hand values from left to right. TypeScript checks every transition and the final intrinsic props.

<traits.button
  of={[{ press }, { analytics }]}
  press:onPress={save}
  analytics:event="save"
>
  Save
</traits.button>

This site also renders a live JSX trait.