> ## Documentation Index
> Fetch the complete documentation index at: https://pearsdb.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```bash theme={null}
npm install @pearsdb/react
# ou
yarn add @pearsdb/react
```

## Configuration

Enveloppez votre application avec le Provider PearsDB :

```jsx theme={null}
import { PearsDBProvider } from '@pearsdb/react';

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

## Hooks

### usePrediction

```jsx theme={null}
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

```jsx theme={null}
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

```jsx theme={null}
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

```jsx theme={null}
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

```jsx theme={null}
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](/fr/api-reference/introduction)
* [Exemples](/fr/docs/examples)
* [Guide de Démarrage Rapide](/fr/docs/quickstart)

## Support

Si vous rencontrez des problèmes :

1. Consultez notre [FAQ](/fr/faq/faq)
2. Rejoignez notre [Communauté](https://community.pearsdb.com)
3. Contactez le [Support Technique](mailto:support@pearsdb.com)