MediaSFU ReactJS
    Preparing search index...

    Variable PaginationConst

    Pagination: React.FC<PaginationOptions> = ...

    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

    The properties for the Pagination component.

    Total number of pages available for navigation.

    Current active page of the user (0-indexed).

    Function to handle page changes. Receives GeneratePageContentOptions.

    Horizontal alignment: 'left', 'middle', or 'right'.

    Vertical alignment: 'top', 'middle', or 'bottom'.

    Layout direction: 'horizontal' or 'vertical'.

    Custom styles for the button container.

    Styles for the active page button.

    Styles for inactive page buttons.

    Background color of the pagination container.

    Height of the pagination container in pixels.

    Whether to show the pagination component.

    Parameters for socket events, breakout rooms, and state updates.

    HTML props for the pagination container.

    Function returning HTML props for page buttons based on context.

    Custom render function for the pagination container.

    Custom render function for individual page buttons.

    Custom render function for page button content.

    A pagination component for navigating pages.

    Basic Usage

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

    Custom Page Button Renderer

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

    Using in uiOverrides (MediasfuGeneric)

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

    Settings

    Member Visibility