Function Pagination

Pagination is a React component for navigating pages with support for breakout rooms, custom styling, and flexible layouts.

This component handles page navigation in multi-page layouts (especially useful for large participant grids) and integrates with MediaSFU's breakout room system. It supports:

• Horizontal and vertical layouts
• Custom positioning (top/middle/bottom, left/middle/right)
• Active/inactive page styling
• Breakout room navigation with socket events
• Custom page button and container renderers
• Override patterns for use in MediaSFU UI components

import React from 'react';
import { Pagination } from 'mediasfu-reactjs';

function App() {
  const parameters = {
    mainRoomsLength: 2,
    memberRoom: 1,
    breakOutRoomStarted: true,
    breakOutRoomEnded: false,
    member: "John",
    breakoutRooms: [[{ name: "John" }], [{ name: "Jane" }]],
    hostNewRoom: 1,
    roomName: "Room 1",
    islevel: "1",
    socket,
    getUpdatedAllParams: () => parameters,
  };
  
  return (
    <Pagination
      totalPages={5}
      currentUserPage={2}
      handlePageChange={generatePageContent}
      position="middle"
      location="middle"
      direction="horizontal"
      buttonsContainerStyle={{ padding: 10 }}
      activePageStyle={{ backgroundColor: "#2c678f" }}
      inactivePageStyle={{ backgroundColor: "#ffffff" }}
      backgroundColor="#ffffff"
      paginationHeight={40}
      showAspect={true}
      parameters={parameters}
    />
  );
}
Copy

import React from 'react';
import { Pagination } from 'mediasfu-reactjs';

function App() {
  return (
    <Pagination
      totalPages={10}
      currentUserPage={3}
      parameters={parameters}
      renderPageButton={({ defaultButton, page, isActive, onSelect }) => (
        <button
          onClick={onSelect}
          style={{
            background: isActive ? 'linear-gradient(45deg, #667eea, #764ba2)' : '#e2e8f0',
            color: isActive ? 'white' : '#4a5568',
            border: 'none',
            borderRadius: '50%',
            width: 40,
            height: 40,
            margin: 5,
            cursor: 'pointer',
            fontWeight: 'bold',
            boxShadow: isActive ? '0 4px 10px rgba(102,126,234,0.5)' : 'none'
          }}
        >
          {page}
        </button>
      )}
    />
  );
}
Copy

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

function App() {
  const CustomPagination = (props: any) => (
    <Pagination
      {...props}
      direction="vertical"
      position="right"
      location="middle"
      activePageStyle={{
        backgroundColor: '#10b981',
        color: 'white',
        fontWeight: 'bold',
        boxShadow: '0 0 15px rgba(16, 185, 129, 0.5)'
      }}
      renderContainer={({ defaultContainer }) => (
        <div style={{
          border: '2px solid #10b981',
          borderRadius: 12,
          padding: 8,
          background: 'rgba(16, 185, 129, 0.1)'
        }}>
          {defaultContainer}
        </div>
      )}
    />
  );

  return (
    <MediasfuGeneric
      useLocalUIMode={true}
      useSeed={true}
      seedData={mySeedData}
      uiOverrides={{
        pagination: CustomPagination
      }}
    />
  );
}
Copy