React

@belvdr/react est une fine couche au-dessus du SDK pour les applications React (18 ou plus). Comme le SDK, il n’est pas encore publié (Installation).

BelvdrProvider

import { BelvdrProvider } from '@belvdr/react'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BelvdrProvider publicKey="pk_…" options={{ apiHost: 'https://api.belvdr.com' }}>
      <App />
    </BelvdrProvider>
  </StrictMode>,
)

• publicKey et options sont celles d’init(). Elles sont lues au premier rendu : les changer ensuite n’a pas d’effet.
• Le Provider initialise le SDK une seule fois, y compris en StrictMode (double montage), lors d’un remontage ou avec plusieurs Providers. Un startSession() appelé dans l’effet d’un composant enfant fonctionne, même si cet effet s’exécute avant celui du Provider.
• Il n’enregistre rien : l’enregistrement démarre avec startSession(), après le consentement.

useBelvdr()

import { useBelvdr } from '@belvdr/react'

function BandeauConsentement() {
  const { startSession, stopSession } = useBelvdr()
  return (
    <>
      <button onClick={() => startSession()}>Accepter</button>
      <button onClick={() => stopSession()}>Refuser</button>
    </>
  )
}

useBelvdr() renvoie startSession, stopSession, identify, reset et capture, avec les mêmes signatures que le SDK, dans une référence stable : utilisable dans les dépendances d’un effet. Hors d’un BelvdrProvider, il lève une erreur explicite.

Par exemple, pour démarrer l’enregistrement à chaque chargement une fois le consentement donné, en identifiant l’utilisateur connecté :

const { startSession } = useBelvdr()

useEffect(() => {
  if (consentement) startSession(utilisateur ? { userId: utilisateur.id } : undefined)
}, [consentement, utilisateur, startSession])

Instance du SDK

Par défaut, le Provider utilise l’instance du package @belvdr/browser : import { capture } from '@belvdr/browser' reste utilisable hors des composants, sur la même instance. La prop client accepte une autre instance, créée avec createBelvdr().

Rendu serveur

Avec Next.js, Remix ou tout rendu serveur, rien n’accède à window pendant le rendu : le SDK n’est initialisé que dans le navigateur.