Build Style Guide
For React mediasfu-reactjs@4.3.7, choose the highest-level UI path that fits your product. Begin with the supplied room experience so you can prove room and media behavior before taking ownership of more interface code.
Choose your React UI path
| Your product needs... | Start with | Your app owns |
|---|---|---|
| A working room with minimal changes | The prebuilt ModernMediasfuGeneric experience | Navigation and product context around the room |
| Branding or selected card, control, or modal changes | UI overrides | The replaced visual surfaces |
| A substantially different room workspace | Custom component replacement | The main workspace while MediaSFU continues to run the room |
| A fully app-owned console or non-room interface | Headless mode | Every visible surface, control state, recovery message, and layout decision |
See Choose your UI mode for the React switches and component patterns behind these choices.
Recommended sequence
- Connect create and join through your secure backend boundary.
- Prove the prebuilt React room lifecycle.
- Replace one visual surface at a time.
- Move to a custom workspace or headless shell only when the product experience requires it.
The lower you move, the more your application must handle: accessibility, loading and failure states, authority checks, media status, confirmation flows, and cleanup.
This guide describes the React 4.3.7 path. Its component names and behavior apply to that package only.