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

    Function QAPanel

    • QAPanel provides an interactive Q&A interface for video rooms.

      Parameters

      Returns ReactElement

      The rendered QAPanel component

      QAPanel automatically connects to the HiyveProvider context for room info and real-time synchronization. It must be used inside a <HiyveProvider>.

      Key Features:

      • Real-time question posting and synchronization
      • Upvoting with duplicate prevention
      • Host-only answering, deleting, and pinning
      • Open for Answers: Owner can enable community answering on any question
      • Multiple Answers: Questions can receive multiple answers when open
      • Accepted Answers: Owner's first answer is marked as official
      • Sort by newest, most votes, or unanswered
      • Late-joiner state sync from room owner
      • Full customization via labels, icons, colors, styles, and render props

      User Roles:

      • Participants: Can ask questions, upvote, and answer open questions
      • Owner/Host: Can answer all questions, delete, pin, and toggle open for answers

      Answer Modes:

      • Owner-only (default): Only the room owner can answer questions
      • Open for Answers: Any participant can answer when owner enables it

      Sort Modes:

      • newest: Most recently asked questions first
      • votes: Questions with most upvotes first
      • unanswered: Unanswered questions first

      Basic usage inside HiyveProvider:

      import { HiyveProvider } from '@hiyve/react';
      import { QAPanel } from '@hiyve/react-collaboration';

      function VideoRoom() {
        return (
          <HiyveProvider generateRoomToken={generateToken}>
            <div className="room-layout">
              <VideoGrid />
              <aside className="sidebar">
                <QAPanel title="Q&A" maxHeight={500} />
              </aside>
            </div>
          </HiyveProvider>
        );
      }

      With customization:

      <QAPanel
        title="Ask Questions"
        labels={{
          askPlaceholder: 'What would you like to know?',
          emptyState: 'No questions yet. Be the first to ask!',
        }}
        colors={{
          upvoteActive: '#ff9800',
          answerBadge: '#4caf50',
        }}
        onQuestionPosted={(q) => console.log('New question:', q.content)}
        onNewQuestion={(q) => playNotificationSound()}
      />

      With persistence:

      function QAWithPersistence() {
        const [savedQuestions, setSavedQuestions] = useLocalStorage('qa-questions', []);

        return (
          <QAPanel
            initialQuestions={savedQuestions}
            onQuestionsChange={setSavedQuestions}
          />
        );
      }

    Settings

    Member Visibility