Variable Pagination`Const`

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

Pagination Component

The Pagination component enables page navigation with support for breakout room logic. It shows page numbers, controls access to breakout rooms based on the user level, and provides customizable layout and styling options.

Component

Param: props

Properties to configure the Pagination component.

Param: props.totalPages

Total number of pages.

Param: props.currentUserPage

Current page number for the user.

Param: props.handlePageChange

Function to handle page changes.

Param: props.position

Horizontal alignment of pagination.

Param: props.location

Vertical alignment of pagination.

Param: props.direction

Direction of pagination (horizontal or vertical).

Param: props.buttonsContainerStyle

Custom styles for the pagination container.

Param: props.activePageStyle

Custom styles for the active page.

Param: props.inactivePageStyle

Custom styles for inactive pages.

Param: props.backgroundColor

Background color for the pagination container.

Param: props.paginationHeight

Height of the pagination container.

Param: props.showAspect

Flag to display the pagination aspect.

Param: props.parameters

Parameters necessary for pagination and breakout room logic.

Example

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

function App() {
  const parameters = {
    mainRoomsLength: 3,
    memberRoom: 1,
    breakOutRoomStarted: true,
    breakOutRoomEnded: false,
    member: 'John Doe',
    breakoutRooms: [/* array of breakout room participants * /],
    hostNewRoom: 2,
    roomName: 'Room A',
    islevel: '2',
    showAlert: (alert) => console.log(alert.message),
    socket: /* Socket connection * /,
    getUpdatedAllParams: () => parameters,
  };

  return (
    <Pagination
      totalPages={10}
      currentUserPage={1}
      parameters={parameters}
      backgroundColor="lightgray"
      paginationHeight={50}
      direction="horizontal"
      position="middle"
      location="bottom"
    />
  );
}

export default App;