Getting Started with React Development with the React Suite Library — Pagination and Grid

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Pagination

We can add pagination buttons with the Pagination component.

For instance, we can write:

import React from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Pagination pages={10} activePage={1} />
    </div>
  );
}

pages sets the number of links to display.

activePages sets the active page number.

We can change the size with the size prop:

import React from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Pagination pages={10} activePage={1} size="lg" />
    </div>
  );
}

'lg' makes it large.

xs makes it extra small, sm makes it small, md makes it medium-sized.

We can add buttons to jump to different pages with various props:

import React from "react";
import { Pagination } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Pagination pages={10} activePage={1} prev last next first />
    </div>
  );
}

prev goes to the previous pagination button.

last goes to the last pagination button.

next goes to the next pagination button.

first goes to the first pagination button.

Breadcrumb

We can add breadcrumbs with the Breadcrumb component.

For instance, we can write:

import React from "react";
import { Breadcrumb } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Breadcrumb>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>Components</Breadcrumb.Item>
        <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

Breadcrumb.Item has the breadcrumb items.

We can change the separator with the separator prop:

import React from "react";
import { Breadcrumb } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Breadcrumb separator="-">
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>Components</Breadcrumb.Item>
        <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

active makes the item active.

We can set the max items to display with the maxItems prop:

import React from "react";
import { Breadcrumb } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Breadcrumb
        maxItems={5}
        onExpand={() => {
          console.log("call onExpand");
        }}
      >
        <Breadcrumb.Item>Item A</Breadcrumb.Item>
        <Breadcrumb.Item>Item B</Breadcrumb.Item>
        <Breadcrumb.Item>Item C</Breadcrumb.Item>
        <Breadcrumb.Item>Item D</Breadcrumb.Item>
        <Breadcrumb.Item>Item E</Breadcrumb.Item>
        <Breadcrumb.Item>Item F</Breadcrumb.Item>
      </Breadcrumb>
    </div>
  );
}

Grid

We can add a grid with the Grid , Row , and Col components.

For instance, we can write:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row className="show-grid">
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
        </Row>
      </Grid>
    </div>
  );
}

xs is represents the xs breakpoint.

It’s the number of columns that the Col takes out of 24 columns.

The following are the width for each breakpoint:

• xs, extra-small: less than480px
• sm, small: greater than or equal to480px
• md, medium: greater than or equal to992px
• lg, large: greater than or equal to1200px

Conclusion

We can add pagination and grids with React Suite.