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

    Interface DevicePreviewRenderProps

    Render props for advanced DevicePreview customization.

    Use these to completely customize how the audio level indicator or error state are rendered while still leveraging the component's logic and state management.

    <DevicePreview
    renderProps={{
    renderAudioLevel: (level, defaultContent) => (
    <Box>
    {defaultContent}
    <Typography>Level: {level.toFixed(0)}%</Typography>
    </Box>
    ),
    renderError: (error, defaultContent) => (
    <Box sx={{ p: 4, textAlign: 'center' }}>
    <ErrorIcon />
    <Typography>{error}</Typography>
    <Button onClick={retry}>Retry</Button>
    </Box>
    ),
    }}
    />
    interface DevicePreviewRenderProps {
        renderAudioLevel?: (
            level: number,
            defaultContent: ReactNode,
        ) => ReactNode;
        renderError?: (error: string, defaultContent: ReactNode) => ReactNode;
    }
    Index

    Properties

    renderAudioLevel?: (level: number, defaultContent: ReactNode) => ReactNode

    Custom render function for the audio level indicator.

    Type Declaration

      • (level: number, defaultContent: ReactNode): ReactNode
      • Parameters

        • level: number

          Current audio level (0-100)

        • defaultContent: ReactNode

          The default rendered content

        Returns ReactNode

        Custom React content for the audio level indicator

    renderError?: (error: string, defaultContent: ReactNode) => ReactNode

    Custom render function for the error state.

    Type Declaration

      • (error: string, defaultContent: ReactNode): ReactNode
      • Parameters

        • error: string

          The error message

        • defaultContent: ReactNode

          The default rendered content

        Returns ReactNode

        Custom React content for the error display