Package Exports

captcha-imh-component
captcha-imh-component/dist/index.es.js
captcha-imh-component/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (captcha-imh-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.