Open In App

React Suite Pagination Disabled

Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a front-end library designed for the middle platform and back-end products. React Suite Pagination component allows the user to select a specific page from various pages.

The disabled prop is a boolean value. It makes the pagination disabled for the user, making it appear faded o the screen. It is true by default.

Syntax:

<Pagination disabled />

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

 

Example 1: We are importing the Pagination Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. We are passing the total prop with a value of 200 and the limit prop with a value of 7. This will show what a simple pagination component looks like.

App.js




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;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example 2: We have just passed the disable prop to the Pagination component to the above code.

App.js




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;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example 3: In this example, we are creating a state named disableBool using react hook useState which stores a  boolean value. We are also developing an onClick function that sets the boolean to false and also shows the alert message ‘Pagination disabled !’, which gets triggered when we are clicking on the pagination.

App.js




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;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Reference:- https://rsuitejs.com/components/pagination/#disabled



Last Updated : 05 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads