React quickstart

Install the React adapter:

npm install @jsx-traits/react

Import traits, define plain transformation functions, and select them on an intrinsic element:

import { traits } from "@jsx-traits/react";

function labelled(
  input: React.JSX.IntrinsicElements["button"],
  options: { label: string },
) {
  return { ...input, "aria-label": options.label };
}

export function SaveButton() {
  return (
    <traits.button of={[{ labelled }]} labelled:label="Save changes">
      Save
    </traits.button>
  );
}