Skip to content
Related Articles
Open in App
Not now

Related Articles

React Suite Pagination Size

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 29 Jun, 2022
Improve Article
Save Article

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 a range of pages.

Size Prop is used to set the size of the Pagination component.

There are four alternatives that are available.

  • xs: the smallest size that is available
  • sm: it is the size small a bit bigger than the size xs.
  • md: the medium size which is bigger than the sm.
  • lg: the largest size available.

Syntax:

<Pagination  size="" />

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.

Javascript




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: In this example, we are passing different values to the size prop of our Pagination Component.

App.js

import { Pagination } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
  return (
    <div className="App">
      <h4> React Suite Pagination Size</h4>
      <p>size="lg"</p>
      <Pagination total={200} limit={7} size="lg" />
      <p>size="md"</p>
      <Pagination total={200} limit={7} size="md" />
      <p>size="sm"</p>
      <Pagination total={200} limit={7} size="sm" />
      <p>size="xs"</p>
      <Pagination total={200} limit={7} size="xs" />
    </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/#size

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!