Hiyve Components - v1.0.0
    Preparing search index...

    Interface JoinFormProps

    Props for the JoinForm component.

    Provides a complete room creation and joining form with role selection, device preview, and optional waiting room configuration.

    Works in two modes:

    • Callback mode (default): Uses onCreateRoom / onJoinRoom callbacks
    • Auto-connect mode (autoConnect: true): Uses useConnection() from @hiyve/react, requiring a HiyveProvider ancestor

    Auto-connect inside HiyveProvider:

    <HiyveProvider generateRoomToken={getToken}>
      <JoinForm autoConnect storagePrefix="myapp" />
    </HiyveProvider>
    interface JoinFormProps {
        autoConnect?: boolean;
        colors?: Partial<JoinFormColors>;
        defaultRole?: "owner" | "guest";
        devicePreviewMode?: "dialog" | "inline";
        icons?: Partial<JoinFormIcons>;
        labels?: Partial<JoinFormLabels>;
        onBack?: () => void;
        onCreateRoom?: (
            roomName: string,
            userName: string,
            options?: { requireWaitingRoom?: boolean },
        ) => Promise<void>;
        onError?: (error: Error) => void;
        onJoinRoom?: (roomName: string, userName: string) => Promise<void>;
        showDevicePreview?: boolean;
        showRoleToggle?: boolean;
        showWaitingRoomToggle?: boolean;
        storagePrefix?: string | null;
        styles?: Partial<JoinFormStyles>;
        sx?: SxProps<Theme>;
    }
    Index

    Properties

    autoConnect? colors? defaultRole? devicePreviewMode? icons? labels? onBack? onCreateRoom? onError? onJoinRoom? showDevicePreview? showRoleToggle? showWaitingRoomToggle? storagePrefix? styles? sx?

    Properties

    autoConnect?: boolean

    When true, uses useConnection() internally (default: false)

    colors?: Partial<JoinFormColors>

    Custom colors

    defaultRole?: "owner" | "guest"

    Default role selection (default: 'owner')

    devicePreviewMode?: "dialog" | "inline"

    How to display the device preview (default: 'dialog')

    icons?: Partial<JoinFormIcons>

    Custom icons

    labels?: Partial<JoinFormLabels>

    Custom labels for i18n support

    onBack?: () => void

    Callback for back navigation

    onCreateRoom?: (
        roomName: string,
        userName: string,
        options?: { requireWaitingRoom?: boolean },
    ) => Promise<void>

    Callback when creating a room (non-autoConnect mode)

    onError?: (error: Error) => void

    Callback when an error occurs

    onJoinRoom?: (roomName: string, userName: string) => Promise<void>

    Callback when joining a room (non-autoConnect mode)

    showDevicePreview?: boolean

    Whether to show the device preview button (default: true)

    showRoleToggle?: boolean

    Whether to show the owner/guest role toggle (default: true)

    showWaitingRoomToggle?: boolean

    Whether to show the waiting room toggle for owners (default: false)

    storagePrefix?: string | null

    Prefix for localStorage persistence keys. null disables persistence (default: null)

    styles?: Partial<JoinFormStyles>

    Custom styles

    sx?: SxProps<Theme>

    MUI sx prop for container styling

    Settings

    Member Visibility

    On This Page

    Properties