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

    Interface QAPanelRenderProps

    Render props for advanced QAPanel customization.

    Use these to completely customize how questions, answers, or other elements are rendered while still leveraging the component's logic.

    <QAPanel
      renderProps={{
        renderQuestion: (question, isOwner, defaultContent) => (
          <Box onClick={() => highlightQuestion(question.id)}>
            {defaultContent}
          </Box>
        ),
        renderEmptyState: () => (
          <Box sx={{ p: 4, textAlign: 'center' }}>
            <Typography>Be the first to ask a question!</Typography>
          </Box>
        ),
        formatTimestamp: (timestamp) => formatRelativeTime(timestamp),
      }}
    />
    interface QAPanelRenderProps {
        formatTimestamp?: (timestamp: number) => string;
        renderAnswer?: (
            answer: Answer,
            question: Question,
            defaultContent: ReactNode,
        ) => ReactNode;
        renderEmptyState?: () => ReactNode;
        renderHeader?: (
            title: string,
            questionCount: number,
            defaultContent: ReactNode,
        ) => ReactNode;
        renderQuestion?: (
            question: Question,
            isOwner: boolean,
            defaultContent: ReactNode,
        ) => ReactNode;
    }
    Index

    Properties

    formatTimestamp? renderAnswer? renderEmptyState? renderHeader? renderQuestion?

    Properties

    formatTimestamp?: (timestamp: number) => string

    Custom timestamp formatter.

    Type Declaration

      • (timestamp: number): string

      • Parameters

        • timestamp: number

          The timestamp in milliseconds

        Returns string

        Formatted timestamp string

    renderAnswer?: (
        answer: Answer,
        question: Question,
        defaultContent: ReactNode,
    ) => ReactNode

    Custom render function for an answer.

    Type Declaration

      • (answer: Answer, question: Question, defaultContent: ReactNode): ReactNode

      • Parameters

        • answer: Answer

          The answer data

        • question: Question

          The parent question

        • defaultContent: ReactNode

          The default rendered content

        Returns ReactNode

        Custom React content for the answer

    renderEmptyState?: () => ReactNode

    Custom render function for the empty state.

    Type Declaration

      • (): ReactNode

      • Returns ReactNode

        Custom React content when no questions exist

    renderHeader?: (
        title: string,
        questionCount: number,
        defaultContent: ReactNode,
    ) => ReactNode

    Custom render function for the header.

    Type Declaration

      • (title: string, questionCount: number, defaultContent: ReactNode): ReactNode

      • Parameters

        • title: string

          The header title

        • questionCount: number

          Number of questions

        • defaultContent: ReactNode

          The default rendered header

        Returns ReactNode

        Custom React content for the header

    renderQuestion?: (
        question: Question,
        isOwner: boolean,
        defaultContent: ReactNode,
    ) => ReactNode

    Custom render function for a question.

    Type Declaration

      • (question: Question, isOwner: boolean, defaultContent: ReactNode): ReactNode

      • Parameters

        • question: Question

          The question data

        • isOwner: boolean

          Whether the current user is the room owner

        • defaultContent: ReactNode

          The default rendered content (can be used or replaced)

        Returns ReactNode

        Custom React content for the question

    Settings

    Member Visibility

    On This Page

    Properties