Aller au contenu principal
Version: 0.0.5 (latest)

Référence des Props

Documentation complète de toutes les propriétés disponibles pour le composant <MiniZoe />.

Props principales​

enabled​

  • Type: boolean
  • Défaut: true
  • Description: Active ou désactive globalement Mini-Zoe
<MiniZoe enabled={true} />
astuce

Utilisez cette prop pour désactiver complètement Mini-Zoe dans certaines conditions (ex: pour certains utilisateurs ou environnements).

Props d'affichage​

autoHideDuration​

  • Type: number
  • Défaut: 2500
  • Unité: millisecondes
  • Description: Durée avant que Mini-Zoe se cache automatiquement
<MiniZoe autoHideDuration={3000} /> // 3 secondes

showDelay​

  • Type: number
  • Défaut: 300
  • Unité: millisecondes
  • Description: Délai avant l'apparition de Mini-Zoe
<MiniZoe showDelay={500} /> // 0.5 seconde
info

Un délai d'apparition permet d'éviter les apparitions trop brusques et améliore l'expérience utilisateur.

Props de personnalisation visuelle​

customImage​

  • Type: ImageSourcePropType
  • Défaut: Logo Mini-Zoe par défaut
  • Description: Image personnalisée pour remplacer le logo par défaut
<MiniZoe customImage={require('./assets/custom-avatar.png')} />

borderColor​

  • Type: string
  • Défaut: '#FFD700' (or)
  • Description: Couleur de la bordure du cercle
<MiniZoe borderColor="#00FF00" />

backgroundColor​

  • Type: string
  • Défaut: '#FFF9E6' (crème)
  • Description: Couleur de fond du cercle
<MiniZoe backgroundColor="#E8F5E9" />

Props de positionnement​

bottomOffset​

  • Type: number
  • Défaut: 20
  • Unité: pixels
  • Description: Distance depuis le bas de l'écran
<MiniZoe bottomOffset={40} />

rightOffset​

  • Type: number
  • Défaut: 20
  • Unité: pixels
  • Description: Distance depuis la droite de l'écran
<MiniZoe rightOffset={30} />
Attention

Assurez-vous que les valeurs de bottomOffset et rightOffset permettent à Mini-Zoe de rester visible sur tous les appareils.

Props Text-to-Speech​

enableTextToSpeech​

  • Type: boolean
  • Défaut: false
  • Description: Active la synthèse vocale (Mini-Zoe parle)
<MiniZoe enableTextToSpeech={true} />
Dépendance requise

L'activation du TTS nécessite l'installation de react-native-tts :

npm install react-native-tts

ttsLanguage​

  • Type: string
  • Défaut: 'fr-FR'
  • Description: Langue pour la synthèse vocale

Langues supportées :

  • 'fr-FR' - Français
  • 'en-US' - Anglais (US)
  • 'en-GB' - Anglais (UK)
  • 'es-ES' - Espagnol
  • 'de-DE' - Allemand
  • 'it-IT' - Italien
<MiniZoe
  enableTextToSpeech={true}
  ttsLanguage="en-US"
/>

ttsRate​

  • Type: number
  • Défaut: 0.5
  • Plage: 0.5 à 2.0
  • Description: Vitesse de parole
<MiniZoe
  enableTextToSpeech={true}
  ttsRate={0.7} // Un peu plus rapide
/>

Valeurs recommandées :

  • 0.5 - Lent (recommandé pour l'accessibilité)
  • 1.0 - Normal
  • 1.5 - Rapide
  • 2.0 - Très rapide

ttsPitch​

  • Type: number
  • Défaut: 1.0
  • Plage: 0.5 à 2.0
  • Description: Tonalité de la voix
<MiniZoe
  enableTextToSpeech={true}
  ttsPitch={1.2} // Voix plus aiguë
/>

Valeurs recommandées :

  • 0.5 - Voix grave
  • 1.0 - Normal (recommandé)
  • 1.5 - Voix aiguë
  • 2.0 - Très aiguë

Exemple complet​

Voici un exemple utilisant toutes les props principales :

import { MiniZoe } from '@blueshork/mini-zoe';

function App() {
  return (
    <View style={{ flex: 1 }}>
      {/* Votre contenu */}

      <MiniZoe
        // Props principales
        enabled={true}

        // Affichage
        autoHideDuration={3000}
        showDelay={500}

        // Personnalisation
        customImage={require('./assets/assistant.png')}
        borderColor="#667eea"
        backgroundColor="#f0f0f0"

        // Positionnement
        bottomOffset={30}
        rightOffset={30}

        // Text-to-Speech
        enableTextToSpeech={true}
        ttsLanguage="fr-FR"
        ttsRate={0.6}
        ttsPitch={1.0}
      />
    </View>
  );
}

TypeScript​

Si vous utilisez TypeScript, toutes les props sont typées :

import { MiniZoe } from '@blueshork/mini-zoe';
import type { ImageSourcePropType } from 'react-native';

const customImage: ImageSourcePropType = require('./assets/avatar.png');

<MiniZoe
  enabled={true}
  autoHideDuration={3000}
  customImage={customImage}
  borderColor="#FFD700"
  ttsRate={0.5}
/>

Prochaines étapes​