captcha-imh-component

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.