Paginación de React Suite deshabilitada

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente de paginación de React Suite permite al usuario seleccionar una página específica de varias páginas.

El accesorio deshabilitado es un valor booleano. Deshabilita la paginación para el usuario, haciéndola aparecer difuminada en la pantalla. Es cierto por defecto.

Sintaxis:

<Pagination disabled />

Requisito previo:

• Introducción e instalación reactJS
• Componente de paginación de React Suite
   

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

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Se verá así:

 

Ejemplo 1: estamos importando el componente de paginación desde «rsuite», y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css». Estamos pasando la propiedad total con un valor de 200 y la propiedad límite con un valor de 7. Esto mostrará cómo se ve un componente de paginación simple.

import { Pagination } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  return (
    <div className="App">
      <h4> React Suite Pagination</h4>
      <p>Simple Pagination</p>
      <Pagination total={200} limit={7} />
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

 

Ejemplo 2: acabamos de pasar la propiedad de desactivación al componente Paginación del código anterior.

import { Pagination } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  return (
    <div className="App">
      <h4> React Suite Pagination</h4>
      <p>Simple Pagination(disabled)</p>
      <Pagination total={200} limit={7} disabled />
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

 

Ejemplo 3: En este ejemplo, estamos creando un estado llamado disabledBool usando useState de gancho de reacción que almacena un valor booleano. También estamos desarrollando una función onClick que establece el booleano en falso y también muestra el mensaje de alerta ‘¡Paginación deshabilitada!’, que se activa cuando hacemos clic en la paginación.

import { useState } from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const [disableBool, setDisableBool] = useState(false);
  const disableBoolHandler = () => {
    setDisableBool(true);
    alert("Pagination disabled !");
  };
  return (
    <div className="App">
      <h4> React Suite Pagination</h4>
      <Pagination
        total={200}
        limit={7}
        onClick={disableBoolHandler}
        disabled={disableBool}
      />
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

 

Referencia: – https://rsuitejs.com/components/pagination/#disabled