Integrações com frameworks

Toda integração segue uma regra: registre Orbz uma vez no código do navegador e depois renderize e controle o elemento personalizado <orb-z> diretamente. O pacote não inclui adaptadores para frameworks.

JavaScript puro


import "@neongate-ai/orbz/browser";
import type { OrbzElement } from "@neongate-ai/orbz";
 
const orb = document.querySelector<OrbzElement>("orb-z");
if (orb) orb.state = "listening";


<orb-z state="idle" size="300px"></orb-z>

React


import "@neongate-ai/orbz/browser";
import { useState } from "react";
import type { OrbzState } from "@neongate-ai/orbz";
 
export function Assistant() {
  const [state, setState] = useState<OrbzState>("idle");
 
  return (
    <>
      <orb-z state={state} size="300px" />
      <button type="button" onClick={() => setState("listening")}>Listen</button>
    </>
  );
}

Declare orb-z em React.JSX.IntrinsicElements, como mostra o guia de React e Next.js.

Next.js


"use client";
 
import "@neongate-ai/orbz/browser";
 
export function AssistantPresence() {
  return <orb-z state="thinking" size="300px" />;
}

Vue

Registre o componente no ponto de entrada da aplicação e marque a tag como elemento personalizado na configuração do compilador Vue:


import "@neongate-ai/orbz/browser";
import { createApp } from "vue";
import App from "./App.vue";
 
createApp(App).mount("#app");


<orb-z :state="state" :size="`${size}px`" />

Svelte


import "@neongate-ai/orbz/browser";


<orb-z {state} size={`${size}px`}></orb-z>

Angular

Importe o registro antes da inicialização e habilite o esquema de elementos personalizados:


import "@neongate-ai/orbz/browser";
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 
@Component({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  selector: "app-root",
  template: `<orb-z [attr.state]="state"></orb-z>`
})
export class AppComponent {
  state = "idle";
}

Os exemplos publicados preservam a mesma interface e o mesmo layout, usando o modelo de estado nativo de cada framework.