captcha-imh-component

Un composant React réutilisable pour l'intégration de CAPTCHA dans vos applications web.

Installation

npm install captcha-imh-component

Utilisation de base

import React, { useState } from 'react';
import Captcha from 'captcha-imh-component';

function App() {
  const [captchaValue, setCaptchaValue] = useState('');
  const [reset, setReset] = useState(false);

  const handleCaptchaChange = (value) => {
    setCaptchaValue(value);
  };

  const handleReset = () => {
    setReset(!reset);
  };

  return (
    <div>
      <Captcha 
        onChange={handleCaptchaChange}
        reset={reset}
      />
      <button onClick={handleReset}>Reset CAPTCHA</button>
      <p>Valeur saisie: {captchaValue}</p>
    </div>
  );
}

export default App;

Props

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | reset | boolean | false | Force le rechargement du CAPTCHA | | onChange | function | - | Callback appelé quand la valeur d'entrée change | | onCaptchaTextChange | function | - | Callback appelé quand le texte CAPTCHA change | | style | object | {} | Styles pour l'icône de rafraîchissement | | error | object | - | Objet d'erreur à afficher | | apiEndpoint | string | '/api/generate-captcha' | URL de l'API CAPTCHA | | httpMethod | string | 'GET' | Méthode HTTP pour l'API | | placeholder | string | 'Entrer CAPTCHA' | Placeholder du champ de saisie | | makeApiCall | function | - | Fonction personnalisée pour les appels API | | sessionStorageKey | string | 'sessionId' | Clé de stockage pour l'ID de session | | captchaStorageKey | string | 'captcha' | Clé de stockage pour le texte CAPTCHA | | inputStyle | object | {} | Styles personnalisés pour le champ de saisie | | containerStyle | object | {} | Styles personnalisés pour le conteneur | | imageStyle | object | {} | Styles personnalisés pour l'image CAPTCHA | | ErrorComponent | component | - | Composant personnalisé pour l'affichage des erreurs |

Exemples avancés

Avec fonction API personnalisée

import Captcha from 'captcha-imh-component';

const customApiCall = async (method, url, data, headers) => {
  // Votre logique d'appel API personnalisée
  const response = await fetch(url, {
    method,
    headers: {
      ...headers,
      'Authorization': 'Bearer your-token'
    },
    body: data ? JSON.stringify(data) : undefined
  });
  return response.json();
};

function App() {
  return (
    <Captcha 
      makeApiCall={customApiCall}
      apiEndpoint="https://your-api.com/captcha"
    />
  );
}

Avec composants personnalisés

import Captcha from 'captcha-imh-component';

const CustomError = ({ error, message }) => (
  <div className="custom-error-display">
    {error?.data?.detail && <span>{message}</span>}
  </div>
);

function App() {
  return (
    <Captcha 
      errorComponent={CustomError}
    />
  );
}

Avec styles personnalisés

import Captcha from 'captcha-imh-component';

function App() {
  const customStyles = {
    container: {
      backgroundColor: '#f5f5f5',
      padding: '20px',
      borderRadius: '8px'
    },
    input: {
      fontSize: '16px',
      fontFamily: 'Arial, sans-serif',
      border: '2px solid #007bff'
    },
    image: {
      border: '1px solid #ddd',
      borderRadius: '4px'
    }
  };

  return (
    <Captcha 
      containerStyle={customStyles.container}
      inputStyle={customStyles.input}
      imageStyle={customStyles.image}
    />
  );
}

Format de réponse API attendu

Le composant attend une réponse API dans l'un des formats suivants :

Pour CAPTCHA image :

{
  "data": {
    "image": "base64-encoded-image-string",
    "sessionId": "session-identifier"
  }
}

Pour CAPTCHA texte :

{
  "data": {
    "captchaText": "text-captcha-content",
    "sessionId": "session-identifier"
  }
}

Personnalisation CSS

Le composant utilise les classes CSS suivantes que vous pouvez personnaliser :

• .captcha-container - Conteneur principal
• .captcha-image-container - Conteneur de l'image
• .captcha-image - Image CAPTCHA
• .captcha-input-container - Conteneur du champ de saisie
• .captcha-input - Champ de saisie
• .captcha-error - Affichage des erreurs

Dépendances

• React >= 16.8.0
• react-dom >= 16.8.0

Licence

ISC

Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou soumettre une pull request.