React Suite Pagination Size
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:
- Introduction and installation reactJS
- React Suite Pagination Component
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