Variable ShareEventModalConst

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

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

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

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

  )}
/>

); };

export default App;

Copy