69f12aa
import type { Room } from 'livekit-client';
import * as React from 'react';
import { useConnectionState } from '../hooks';
/** @public */
export interface ConnectionStatusProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* The room from which the connection status should be displayed.
*/
room?: Room;
}
/**
* The `ConnectionState` component displays the connection status of the room as strings
* (`"connected" | "connecting" | "disconnected" | "reconnecting"`).
*
* @example
* ```tsx
* <LiveKitRoom>
* <ConnectionState />
* </LiveKitRoom>
* ```
* @public
*/
export const ConnectionState: (
props: ConnectionStatusProps & React.RefAttributes<HTMLDivElement>,
) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLDivElement, ConnectionStatusProps>(
function ConnectionState({ room, ...props }: ConnectionStatusProps, ref) {
const connectionState = useConnectionState(room);
return (
<div ref={ref} {...props}>
{connectionState}
</div>
);
},
);