@rheos-widgets/react

Widgets Rheos en intégration native (React / Next.js).

Installation

pnpm add @rheos-widgets/react

Usage (Next.js App Router)

1. Importer les styles (une fois, côté app) :

import "@rheos-widgets/react/styles.css"; // Tailwind utilities
import "@rheos-widgets/react/theme.css";  // Variables de couleurs (requis)

2. Rendre un widget côté client, en fournissant le token :

"use client";

import { RheosWidgetsProvider, AvWizardWidget } from "@rheos-widgets/react";

export function MyPage({ token }: { token: string }) {
  return (
    <div className="rheos-widget">
      <RheosWidgetsProvider apiBaseUrl="https://api.rheos.fr" token={token}>
        <AvWizardWidget
          config={{
            widgetToken: token,
            theme: {},
            showFooter: true,
          }}
        />
      </RheosWidgetsProvider>
    </div>
  );
}

Contrôle d’accès (abonnement)

Le contrôle d’accès reste côté API Rheos via X-Widget-Token (mêmes règles que l’iFrame). Si l’abonnement n’est pas actif, l’API renvoie une erreur 402/403 (selon endpoint) et les widgets affichent l’état “abonnement requis”.

Configuration API

Par défaut les appels API utilisent process.env.NEXT_PUBLIC_API_URL (fallback http://localhost:8000). Pour éviter de dépendre des env vars côté intégrateur, vous pouvez aussi passer apiBaseUrl au RheosWidgetsProvider.

Notes

• Ce package est Next.js-oriented (certaines parties utilisent next/image).
• Important: theme.css est requis pour que les couleurs (primary, accent, etc.) s'appliquent correctement.
• Le wrapper .rheos-widget est ajouté automatiquement par RheosWidgetsProvider.