Function PollModal

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

Component

Example

// 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"
      />
    </>
  );
}

Example

// 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',
        },
      }}
    />
  );
}

Example

// 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>
        );
      }}
    />
  );
}

Example

// 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} />;

Properties

propTypes? displayName?

Properties

OptionalpropTypes

propTypes?: any

Ignored by React.

Deprecated

Only kept in types for backwards compatibility. Will be removed in a future major release.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

Example


const MyComponent: FC = () => {
  return <div>Hello!</div>
}

MyComponent.displayName = 'MyAwesomeComponent'

Settings

Member Visibility

On This Page

Properties