Accesorios de React Suite <Paginación>

Una suite de React es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre React suite Prop <Pagination>. El componente <Pagination> se usa para ayudar a que las listas largas carguen solo una parte de los datos, puede cambiar rápidamente a la página de datos especificada.

<Paginación> Accesorios:

• activePage: Denota el número de página actual.
• borderLinks: Muestra los botones de paginación de borde 1 y páginas.
• classPrefix: Denota el prefijo de la clase CSS del componente.
• disabled: Denota el componente booleano Disabled.
• puntos suspensivos: Muestra los puntos suspensivos.
• primero: Muestra la primera página.
• last: Muestra la última página.
• diseño: se utiliza para personalizar el diseño de un componente de paginación.
• límite: Denota el número de filas por página.
• limitOptions: Se utiliza para personalizar las opciones del campo de selección de filas por página.
• linkAs: se utiliza para personalizar el tipo de elemento para el componente.
• linkProps: Denota el objeto Los accesorios adicionales se pasan tal cual al enlace subyacente para los elementos no activos.
• locale: Denota el texto Locale.
• maxButtons: indica que los botones de página muestran el número máximo.
• siguiente: Muestra la página siguiente.
• onChangeLimit: es una devolución de llamada que se activa cuando se cambia el número de filas por página.
• onChangePage: es una devolución de llamada que se activa cuando se cambia la página.
• prev: Muestra la página anterior.
• total: Muestra el número total de filas. Generalmente se obtiene a través del servidor.

Sintaxis:

<Pagination total={100} limit={10} 
    activePage={activePage} 
    onChangePage={setActivePage} />

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Ejemplo 1: el siguiente ejemplo muestra los accesorios anterior, último, siguiente, primero, tamaño, total y límite de <Paginación>.

import "rsuite/dist/rsuite.min.css";
import { Pagination } from "rsuite/";
  
export default function App() {
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
          React Suite Pagination Props
        </h4>
  
        <div style={{ marginTop: 20, width: 800 }}>
          <Pagination
            prev
            last
            next
            first
            size="lg"
            total={100}
            limit={10}
          />
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 2: el siguiente ejemplo muestra los accesorios activePage y onChangePage de <Pagination>.

import "rsuite/dist/rsuite.min.css";
import { Pagination } from "rsuite/";
import { useState } from "react";
  
export default function App() {
  const [activePage, setActivePage] = useState(6);
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
          React Suite Pagination Props
        </h4>
  
        <div style={{ marginTop: 20, width: 800 }}>
          <Pagination
            prev
            last
            next
            first
            size="lg"
            total={100}
            limit={10}
            activePage={activePage}
            onChangePage={setActivePage}
          />
        </div>
      </div>
    </center>
  );
}

Producción:

 

Referencia: https://rsuitejs.com/components/pagination/#code-lt-pagination-gt-code