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

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

Properties

propTypes?: any

Ignored by React.

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

displayName?: string

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


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

MyComponent.displayName = 'MyAwesomeComponent'