Composants React Native pour le système de chat utilisant le pattern Compound Components avec intégration des hooks React.
npm install @siran/chat-react-nativeComposants React Native pour le système de chat utilisant le pattern Compound Components avec intégration des hooks React.
``bash`
bun install
Enveloppez votre application avec le ChatProvider :
`tsx
import { ChatProvider } from '@package/chat/react-native';
import { createChatClient } from '@siran/chat-client';
function App() {
const chatClient = createChatClient({
engine,
eventSubscriber,
});
return (
);
}
`
Tous les composants utilisent automatiquement les hooks de @siran/chat-react-hooks :
`tsx
import { ChatProvider, Chat } from '@package/chat/react-native';
import { createChatClient } from '@siran/chat-client';
function ChatScreen() {
return (
{/ Charge automatiquement les messages via useMessages /}
{/ Affiche automatiquement les utilisateurs en train de taper via useTyping /}
{/ Combine Input + SendButton avec useSendMessage /}
);
}
`
Vous pouvez personnaliser le rendu de chaque message :
`tsx`
)}
/>
Props:
- children?: ReactNode - Contenu de l'en-têtestyle?: ViewStyle
- - Styles personnalisés
et useSubscribeToConversation.Props:
-
conversationId?: string - ID de la conversation (optionnel si fourni dans Chat)
- userId?: string - ID de l'utilisateur (optionnel si fourni dans Chat)
- autoLoad?: boolean - Charger automatiquement les messages (défaut: true)
- showLoading?: boolean - Afficher l'indicateur de chargement (défaut: true)
- showError?: boolean - Afficher les erreurs (défaut: true)
- renderMessage?: (message: ChatMessage) => ReactNode - Fonction pour personnaliser le rendu de chaque message
- style?: ViewStyle - Styles personnalisésRequis:
conversationId et userId doivent être fournis (via props ou contexte Chat)$3
Composant pour afficher un message individuel.Props:
-
children?: ReactNode - Contenu du message
- messageId?: string - Identifiant du message
- style?: ViewStyle - Styles personnalisés$3
Champ de saisie pour les messages.Props:
-
placeholder?: string - Texte placeholder (défaut: "Tapez votre message...")
- value?: string - Valeur contrôlée
- onChangeText?: (text: string) => void - Callback de changement
- style?: ViewStyle - Styles personnalisés
- Toutes les props de TextInput de React Native$3
Bouton pour envoyer un message.Props:
-
onPress?: () => void - Callback au clic
- disabled?: boolean - État désactivé
- children?: ReactNode - Contenu personnalisé (défaut: "Envoyer")
- style?: ViewStyle - Styles personnalisés$3
Composant combiné qui intègre Chat.Input + Chat.SendButton avec useSendMessage. Utilise toujours les hooks pour envoyer les messages.Props:
-
conversationId?: string - ID de la conversation (optionnel si fourni dans Chat)
- senderId?: string - ID de l'expéditeur (optionnel si userId fourni dans Chat)
- placeholder?: string - Texte placeholder (défaut: "Tapez votre message...")
- style?: ViewStyle - Styles du conteneur
- inputStyle?: ViewStyle - Styles de l'input
- buttonStyle?: ViewStyle - Styles du boutonRequis:
conversationId et senderId doivent être fournis (via props ou contexte Chat)$3
Indicateur de frappe en cours. Utilise toujours useTyping pour récupérer les utilisateurs en train de taper.Props:
-
conversationId?: string - ID de la conversation (optionnel si fourni dans Chat)
- style?: ViewStyle - Styles personnalisésRequis:
conversationId doit être fourni (via props ou contexte Chat)Hooks disponibles
$3
Pour accéder au contexte du composant Chat dans vos propres composants :
`tsx
import { useChatContext } from '@package/chat/react-native';function CustomComponent() {
const { conversationId, userId } = useChatContext();
// Utiliser conversationId et userId
}
`$3
Tous les hooks de
@siran/chat-react-hooks sont disponibles et peuvent être utilisés directement :`tsx
import { useMessages, useSendMessage, useTyping } from '@siran/chat-react-hooks';function MyComponent() {
const { messages } = useMessages('conv-123', 'user-456');
const { sendMessage } = useSendMessage();
const typingUsers = useTyping('conv-123');
// ...
}
`Composition flexible
Les slots peuvent être utilisés dans n'importe quel ordre et vous pouvez créer votre propre layout :
`tsx
{/ Votre propre structure /}
`Personnalisation
- Tous les composants acceptent une prop
style pour personnaliser l'apparence
- Chat.MessageList accepte renderMessage pour personnaliser le rendu de chaque message
- Les composants Chat.Input et Chat.SendButton` peuvent être utilisés séparément si vous préférez gérer l'envoi manuellement