MediaSFU ReactJS
    Preparing search index...

    Variable PollModalConst

    PollModal: React.FC<PollModalOptions> = ...

    PollModal - Interactive polling interface for creating and managing live polls

    A comprehensive modal for creating, displaying, and voting on polls during events. Supports multiple poll types (True/False, Yes/No, custom options), real-time voting, and poll history tracking. Perfect for audience engagement and quick feedback.

    Features:

    • Create new polls with multiple question types
    • True/False and Yes/No quick poll templates
    • Custom multiple-choice polls (2-5 options)
    • Real-time voting with live result updates
    • Previous polls history display with results
    • Host controls (create, end polls)
    • Participant voting interface
    • Vote percentage calculations
    • Custom render hooks for complete UI flexibility

    Configuration options

    Modal visibility state

    Callback when modal is closed

    Modal position on screen

    Modal background color

    Current user's member ID

    User level ('2'=host, '1'=co-host, '0'=participant)

    Array of all polls (active + previous)

    Currently active poll

    Socket.io client instance

    Meeting/room identifier

    Alert display function

    Update modal visibility state

    Function to create new poll

    Function to end active poll

    Function to submit vote

    Modal title content

    HTML attributes for overlay div

    HTML attributes for content container

    HTML attributes for header section

    HTML attributes for close button

    Custom close icon

    HTML attributes for body section

    HTML attributes for create poll form

    HTML attributes for question input

    HTML attributes for type selector

    HTML attributes for vote buttons

    HTML attributes for end poll button

    HTML attributes for submit button

    Content when no previous polls

    Content when no active poll

    Custom header renderer

    Custom previous polls renderer

    Custom create poll form renderer

    Custom active poll renderer

    Custom body renderer

    Custom content renderer

    Rendered poll modal

    // Basic poll modal for host

    import React, { useState } from 'react';
    import { PollModal } from 'mediasfu-reactjs';

    function HostPolls({ parameters }) {
      const [isVisible, setIsVisible] = useState(false);

      return (
        <>
          <button onClick={() => setIsVisible(true)}>
            Polls ({parameters.polls.length})
          </button>
          <PollModal
            isPollModalVisible={isVisible}
            onClose={() => setIsVisible(false)}
            member={parameters.member}
            islevel={parameters.islevel}
            polls={parameters.polls}
            poll={parameters.poll}
            socket={parameters.socket}
            roomName={parameters.roomName}
            showAlert={parameters.showAlert}
            updateIsPollModalVisible={parameters.updateIsPollModalVisible}
            handleCreatePoll={parameters.handleCreatePoll}
            handleEndPoll={parameters.handleEndPoll}
            handleVotePoll={parameters.handleVotePoll}
            backgroundColor="#0f172a"
            position="topRight"
          />
        </>
      );
    }

    // Custom styled poll with branded colors

    import { PollModal } from 'mediasfu-reactjs';

    function BrandedPoll({ isVisible, onClose, parameters }) {
      return (
        <PollModal
          isPollModalVisible={isVisible}
          onClose={onClose}
          member={parameters.member}
          islevel={parameters.islevel}
          polls={parameters.polls}
          poll={parameters.poll}
          socket={parameters.socket}
          roomName={parameters.roomName}
          showAlert={parameters.showAlert}
          updateIsPollModalVisible={parameters.updateIsPollModalVisible}
          handleCreatePoll={parameters.handleCreatePoll}
          handleEndPoll={parameters.handleEndPoll}
          handleVotePoll={parameters.handleVotePoll}
          backgroundColor="#1e3a8a"
          position="topLeft"
          contentProps={{
            style: {
              borderRadius: 20,
              border: '2px solid #3b82f6',
              boxShadow: '0 20px 60px rgba(59,130,246,0.3)',
            },
          }}
          submitPollButtonProps={{
            style: {
              background: 'linear-gradient(135deg, #22c55e 0%, #14532d 100%)',
              color: 'white',
              padding: '12px 24px',
              borderRadius: 12,
              fontWeight: 600,
              border: 'none',
              cursor: 'pointer',
            },
          }}
          voteButtonProps={{
            style: {
              padding: '10px 20px',
              borderRadius: 8,
              transition: 'all 0.2s ease',
            },
          }}
        />
      );
    }

    // Custom poll with analytics tracking

    import { PollModal } from 'mediasfu-reactjs';

    function AnalyticsPoll({ isVisible, onClose, parameters }) {
      const handleCreatePoll = async (options) => {
        analytics.track('poll_created', {
          question: options.poll.question,
          type: options.poll.type,
          optionsCount: options.poll.options.length,
        });
        return parameters.handleCreatePoll(options);
      };

      const handleVotePoll = async (options) => {
        analytics.track('poll_voted', {
          pollId: options.pollId,
          optionIndex: options.optionIndex,
        });
        return parameters.handleVotePoll(options);
      };

      return (
        <PollModal
          isPollModalVisible={isVisible}
          onClose={onClose}
          member={parameters.member}
          islevel={parameters.islevel}
          polls={parameters.polls}
          poll={parameters.poll}
          socket={parameters.socket}
          roomName={parameters.roomName}
          showAlert={parameters.showAlert}
          updateIsPollModalVisible={parameters.updateIsPollModalVisible}
          handleCreatePoll={handleCreatePoll}
          handleEndPoll={parameters.handleEndPoll}
          handleVotePoll={handleVotePoll}
          renderActivePoll={({ defaultActivePoll, activePoll }) => {
            if (!activePoll) return defaultActivePoll;

            return (
              <div style={{
                background: 'white',
                padding: 20,
                borderRadius: 12,
                border: '2px solid #3b82f6',
              }}>
                <h3 style={{ marginBottom: 16, color: '#1e3a8a' }}>
                  {activePoll.question}
                </h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {activePoll.options.map((option, index) => {
                    const voteCount = activePoll.votes?.[index] || 0;
                    const totalVotes = Object.values(activePoll.votes || {})
                      .reduce((sum: number, count) => sum + (count as number), 0);
                    const percentage = totalVotes > 0
                      ? Math.round((voteCount / totalVotes) * 100)
                      : 0;

                    return (
                      <button
                        key={index}
                        onClick={() => handleVotePoll({ pollId: activePoll.id, optionIndex: index })}
                        style={{
                          padding: 12,
                          borderRadius: 8,
                          border: '2px solid #e2e8f0',
                          background: 'white',
                          cursor: 'pointer',
                          position: 'relative',
                          overflow: 'hidden',
                        }}
                      >
                        <div style={{
                          position: 'absolute',
                          left: 0,
                          top: 0,
                          bottom: 0,
                          width: `${percentage}%`,
                          background: '#3b82f6',
                          opacity: 0.2,
                          transition: 'width 0.3s ease',
                        }} />
                        <div style={{ position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between' }}>
                          <span>{option}</span>
                          <span style={{ fontWeight: 600 }}>{percentage}%</span>
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>
            );
          }}
        />
      );
    }

    // Override with MediasfuGeneric uiOverrides

    import { MediasfuGeneric, PollModal } from 'mediasfu-reactjs';

    const uiOverrides = {
      pollModal: {
        component: (props) => (
          <PollModal
            {...props}
            backgroundColor="#0f172a"
            position="topRight"
            contentProps={{
              style: {
                maxHeight: '85vh',
                borderRadius: 20,
                border: '2px solid #3b82f6',
              },
            }}
            submitPollButtonProps={{
              style: {
                background: '#22c55e',
                borderRadius: 12,
                padding: '12px 28px',
                fontWeight: 600,
              },
            }}
          />
        ),
      },
    };

    <MediasfuGeneric uiOverrides={uiOverrides} />;

    Settings

    Member Visibility