React

Intégrez PearsDB dans vos applications React

​

Bibliothèque React PearsDB

La bibliothèque React PearsDB fournit des composants et des hooks pour intégrer facilement PearsDB dans vos applications React.

​

Installation

npm install @pearsdb/react
# ou
yarn add @pearsdb/react

​

Configuration

Enveloppez votre application avec le Provider PearsDB :

import { PearsDBProvider } from '@pearsdb/react';

function App() {
  return (
    <PearsDBProvider apiKey="votre_clé_api">
      <YourApp />
    </PearsDBProvider>
  );
}

​

Hooks

​

usePrediction

import { usePrediction } from '@pearsdb/react';

function MyComponent() {
  const { prediction, loading, error } = usePrediction('mon_modèle', {
    input: 'Quel temps fera-t-il demain ?'
  });

  if (loading) return <div>Chargement...</div>;
  if (error) return <div>Erreur: {error.message}</div>;

  return <div>Prédiction: {prediction}</div>;
}

​

useModel

import { useModel } from '@pearsdb/react';

function ModelComponent() {
  const { model, loading, error } = useModel('mon_modèle');

  if (loading) return <div>Chargement...</div>;
  if (error) return <div>Erreur: {error.message}</div>;

  return (
    <div>
      <h2>{model.name}</h2>
      <p>Status: {model.status}</p>
    </div>
  );
}

​

Composants

​

PredictionComponent

import { PredictionComponent } from '@pearsdb/react';

function MyComponent() {
  return (
    <PredictionComponent
      modelId="mon_modèle"
      input="Quel temps fera-t-il demain ?"
      onSuccess={(prediction) => console.log('Prédiction:', prediction)}
      onError={(error) => console.error('Erreur:', error)}
    />
  );
}

​

ModelList

import { ModelList } from '@pearsdb/react';

function ModelsComponent() {
  return (
    <ModelList
      onModelSelect={(model) => console.log('Modèle sélectionné:', model)}
      onError={(error) => console.error('Erreur:', error)}
    />
  );
}

​

Gestion des Erreurs

import { ErrorBoundary } from '@pearsdb/react';

function App() {
  return (
    <ErrorBoundary
      fallback={({ error }) => (
        <div>Une erreur s'est produite: {error.message}</div>
      )}
    >
      <YourApp />
    </ErrorBoundary>
  );
}

​

Ressources Supplémentaires

• Documentation API
• Exemples
• Guide de Démarrage Rapide

​

Support

Si vous rencontrez des problèmes :

1. Consultez notre FAQ
2. Rejoignez notre Communauté
3. Contactez le Support Technique