\n \n {/* Your main content */}\n \n \n
\n```\n\n## Props\n\n### TwitchStream Component Props\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| **LiveChat Props** | | | | |\n| `apiKey` | string | ✅ | - | LiveChat API key |\n| `serverUrl` | string | ✅ | - | WebSocket server URL |\n| `userId` | string | ✅ | - | Unique user identifier |\n| `username` | string | ✅ | - | Display name |\n| `roomId` | string | ❌ | 'lobby' | Chat room ID |\n| `role` | 'user' \\| 'moderator' \\| 'admin' | ❌ | 'user' | User role |\n| `theme` | 'light' \\| 'dark' | ❌ | 'dark' | Chat theme |\n| `maxHeight` | string | ❌ | '100%' | Maximum chat height |\n| `onConnect` | () => void | ❌ | - | Connection callback |\n| `onDisconnect` | () => void | ❌ | - | Disconnection callback |\n| `onMessage` | (message) => void | ❌ | - | New message callback |\n| `onError` | (error) => void | ❌ | - | Error callback |\n| **Stream Props** | | | | |\n| `streamTitle` | string | ✅ | - | Main stream title |\n| `streamerName` | string | ✅ | - | Streamer's name |\n| `viewerCount` | number | ❌ | 0 | Current viewer count |\n| `isLive` | boolean | ❌ | true | Whether stream is live |\n| **Video/Content Props** | | | | |\n| `videoSrc` | string | ❌ | - | Video source URL |\n| `iframeSrc` | string | ❌ | - | Iframe source URL (alternative to video) |\n| `videoPoster` | string | ❌ | - | Video poster image |\n| `autoPlay` | boolean | ❌ | true | Auto-play video |\n| `muted` | boolean | ❌ | true | Mute video by default |\n| `loop` | boolean | ❌ | true | Loop video |\n| `controls` | boolean | ❌ | true | Show video controls |\n| `videoFit` | 'contain' \\| 'cover' \\| 'fill' \\| 'scale-down' \\| 'none' | ❌ | 'cover' | Video scaling behavior |\n| `hideControlsForEmbedded` | boolean | ❌ | false | Hide video controls for embedded use |\n| **Customization Props** | | | | |\n| `streamerAvatar` | string | ❌ | - | Streamer avatar image URL |\n| `showChatToggle` | boolean | ❌ | true | Show chat toggle button |\n| `chatWidth` | string | ❌ | '24rem' | Chat overlay width |\n| `headerColor` | string | ❌ | '#171719' | Header background color |\n| `className` | string | ❌ | - | Additional CSS classes |\n| **Fullscreen Props** | | | | |\n| `showFullscreenButton` | boolean | ❌ | true | Show fullscreen button |\n| `fullscreenButtonPosition` | 'top-right' \\| 'top-left' \\| 'bottom-right' \\| 'bottom-left' | ❌ | 'top-right' | Fullscreen button position |\n| **Typography Props** | | | | |\n| `titleFontSize` | string | ❌ | '1.125rem' | Stream title font size |\n| `detailsFontSize` | string | ❌ | '0.875rem' | Details text font size |\n| `streamerNameFontSize` | string | ❌ | '0.875rem' | Streamer name font size |\n| **Chat Props** | | | | |\n| `chatSize` | 'sm' \\| 'md' \\| 'lg' \\| 'xl' | ❌ | 'md' | Chat message size |\n| `chatAnimation` | boolean | ❌ | true | Enable chat slide animations |\n| **Resize and Container Props** | | | | |\n| `width` | string \\| number | ❌ | '100%' | Container width |\n| `height` | string \\| number | ❌ | '100vh' | Container height |\n| `minWidth` | string \\| number | ❌ | '320px' | Minimum container width |\n| `minHeight` | string \\| number | ❌ | '200px' | Minimum container height |\n| `maxWidth` | string \\| number | ❌ | 'none' | Maximum container width |\n| `maxHeight` | string \\| number | ❌ | 'none' | Maximum container height |\n| `resizable` | boolean | ❌ | false | Enable manual resizing |\n| `containerStyle` | React.CSSProperties | ❌ | - | Additional container styles |\n\n### LiveChat Component Props\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `serverUrl` | string | ✅ | - | WebSocket server URL |\n| `userId` | string | ✅ | - | Unique user identifier |\n| `username` | string | ✅ | - | Display name |\n| `roomId` | string | ❌ | 'default' | Chat room ID |\n| `avatar` | string | ❌ | - | User avatar URL |\n| `theme` | 'light' \\| 'dark' | ❌ | 'dark' | UI theme |\n| `maxHeight` | string | ❌ | '600px' | Maximum container height |\n| `onConnect` | () => void | ❌ | - | Connection callback |\n| `onDisconnect` | () => void | ❌ | - | Disconnection callback |\n| `onMessage` | (message) => void | ❌ | - | New message callback |\n| `onError` | (error) => void | ❌ | - | Error callback |\n\n## Advanced Usage\n\n### Using Hooks Directly\n\n```jsx\nimport { useWebSocket, useChatStore } from '@1house/chat-react';\n\nfunction CustomChat() {\n const { sendMessage } = useWebSocket({\n serverUrl: 'ws://localhost:8080',\n userId: 'user123',\n username: 'JohnDoe'\n });\n\n const { messages, users, isConnected } = useChatStore();\n\n return (\n \n
\n );\n}\n```\n\n### Image Caching\n\n```jsx\nimport { useImageCache } from '@1house/chat-react';\n\nfunction CustomAvatar({ imageUrl }) {\n const { getCachedImage, preloadImage } = useImageCache();\n\n // Preload image\n useEffect(() => {\n preloadImage(imageUrl);\n }, [imageUrl]);\n\n return Custom Chat UI
\nStatus: {isConnected ? 'Connected' : 'Disconnected'}
\n Users: {users.length}
\n {messages.map(msg => (\n {msg.username}: {msg.content}
\n ))}\n