React Suite Pagination Size
Last Updated :
05 Apr, 2023
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...