Function ShareEventModal

ShareEventModal - A modal component for sharing event/meeting details with participants.

This component provides a comprehensive interface for displaying and sharing meeting information including room IDs, passcodes, and integration with social sharing buttons. It intelligently adapts content based on user permissions and event type.

Key Features:

  • Meeting ID Display: Shows formatted room name/ID with copy functionality via MeetingIdComponent
  • Admin Passcode: Conditionally displays admin passcode for hosts (level "2")
  • Share Buttons: Optional integration with ShareButtonsComponent for social/email sharing
  • Event Type Support: Adapts display for different event types (meeting, webinar, conference, broadcast, chat)
  • Flexible Positioning: Configurable modal position (topRight, topLeft, bottomRight, bottomLeft)
  • Local Links: Support for custom local links for event access
  • Component Integration: Seamless integration with MeetingIdComponent, MeetingPasscodeComponent, ShareButtonsComponent
  • HTML Attributes: Granular control over all UI elements (overlay, content, header, sections)
  • Render Hooks: Complete override capability for header, sections, and layout
  • Responsive Design: Automatic positioning and responsive behavior
  • Accessibility: Semantic structure with clear sections and close functionality

Component

Example

// Basic usage for sharing meeting details

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

const BasicShareModal = () => {
  const [showModal, setShowModal] = useState(true);

  return (
    <ShareEventModal
      isShareEventModalVisible={showModal}
      onShareEventClose={() => setShowModal(false)}
      roomName="meeting-room-123"
      eventType="meeting"
      islevel="2"
      adminPasscode="ADMIN2024"
      shareButtons={true}
    />
  );
};

Example

// Custom styled for different event types

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

const WebinarShareModal = () => {
  const [showModal, setShowModal] = useState(true);

  return (
    <ShareEventModal
      isShareEventModalVisible={showModal}
      onShareEventClose={() => setShowModal(false)}
      roomName="webinar-2024-ai"
      eventType="webinar"
      islevel="1"
      backgroundColor="rgba(46, 204, 113, 0.3)"
      position="bottomRight"
      localLink="https://mywebinar.com/join/webinar-2024-ai"
      contentProps={{
        style: {
          borderRadius: '12px',
          boxShadow: '0 4px 20px rgba(0,0,0,0.1)'
        }
      }}
      headerProps={{
        style: { 
          background: 'linear-gradient(135deg, #2ecc71, #27ae60)',
          color: '#fff',
          padding: '16px'
        }
      }}
    />
  );
};

Example

// Analytics tracking for share interactions

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

const AnalyticsShareModal = () => {
  const [showModal, setShowModal] = useState(true);

  const handleClose = () => {
    analytics.track('Share Modal Closed', {
      roomName: 'meeting-room-123',
      eventType: 'conference'
    });
    setShowModal(false);
  };

  return (
    <ShareEventModal
      isShareEventModalVisible={showModal}
      onShareEventClose={handleClose}
      roomName="meeting-room-123"
      eventType="conference"
      islevel="2"
      adminPasscode="CONF2024"
      renderMeetingId={({ defaultMeetingId, roomName }) => {
        // Track when meeting ID is displayed
        React.useEffect(() => {
          analytics.track('Meeting ID Displayed', { roomName });
        }, [roomName]);
        return defaultMeetingId;
      }}
      shareButtonsComponentProps={{
        onShareButtonPress: (platform) => {
          analytics.track('Share Button Clicked', { 
            platform,
            roomName: 'meeting-room-123'
          });
        }
      }}
    />
  );
};

Example

// Integration with MediasfuGeneric using uiOverrides

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

const CustomShareComponent = (props) => (
  <ShareEventModal
    {...props}
    position="topLeft"
    renderBody={({ meetingPasscode, meetingId, shareButtons }) => (
      <div className="custom-share-layout">
        <div className="share-info-section">
          <h3>Join This Meeting</h3>
          {meetingId}
          {meetingPasscode && (
            <div className="host-credentials">
              <h4>🔐 Host Credentials</h4>
              {meetingPasscode}
            </div>
          )}
        </div>
        {shareButtons && (
          <div className="share-actions">
            <h4>Share with Others</h4>
            {shareButtons}
          </div>
        )}
      </div>
    )}
  />
);

const App = () => {
  const [credentials] = useState({
    apiUserName: 'user123',
    apiKey: 'your-api-key'
  });

  return (
    <MediasfuGeneric
      credentials={credentials}
      uiOverrides={{
        ShareEventModal: CustomShareComponent
      }}
    />
  );
};

  )}
/>

); };

export default App;

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