@colletdev/react

React 18+ wrappers for the Collet component library. Typed props, ref forwarding, and idiomatic event callbacks over 48 Rust/WASM Custom Elements.

Install

npm install @colletdev/react @colletdev/core

Quick Start

import { init } from '@colletdev/react';
import { Button, TextInput } from '@colletdev/react';

await init(); // once, at app startup

function App() {
  return (
    <>
      <Button variant="filled" label="Save" intent="primary" onClick={() => save()} />
      <TextInput label="Email" kind="email" onInput={(e) => setEmail(e.detail.value)} />
    </>
  );
}

Features

• Typed props -- union-literal types for variant, intent, size, and all other enums
• Event callbacks -- onClick, onInput, onChange, etc. with typed CustomEvent detail
• Ref types -- ButtonRef, TextInputRef, DialogRef, etc. for imperative access (.open(), .close(), .focus())
• Structured data -- SelectOption[], TableColumn[], AccordionItem[] and other complex prop types are fully typed
• Markdown -- useMarkdown(content) hook renders GFM to sanitized HTML via WASM
• Streaming -- useMarkdownStream() for token-by-token rendering with cursor animation

Markdown

import { useMarkdown } from '@colletdev/react';

function Docs({ content }: { content: string }) {
  const html = useMarkdown(content);
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Event Pattern

Event callbacks use standard React naming (onChange, onClick, onInput, etc.) and receive typed CustomEvent objects:

<Select
  label="Country"
  options={countries}
  onChange={(e) => setCountry(e.detail.value)}
/>

API Reference

See @colletdev/docs for the full props/events reference and framework guides.

License

MIT -- github.com/Danrozen87/collet