Passer au contenu principal

​
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

​
Support

Si vous rencontrez des problèmes :
  1. Consultez notre FAQ
  2. Rejoignez notre Communauté
  3. Contactez le Support Technique