Chapter 1: Introduction to React Suite

React Suite is an effective user interface library designed to seamlessly integrate various components into your React applications. In this guide, we will explore how to leverage this library to enhance your app's functionality.

Section 1.1: Column Gutter and Spacing

To introduce spacing between columns, we can utilize the gutter property. Here’s a simple example:

import React from "react";

import { Grid, Row, Col } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<Grid>

<Row>

<Col xs={2}></Col>

<Col xs={2}></Col>

<Col xs={2}></Col>

</Row>

</Grid>

);

}

The gutter value is defined in pixels. Furthermore, you can adjust the number of columns to offset using the xsOffset attribute:

import React from "react";

import { Grid, Row, Col } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<Grid>

<Row>

<Col xsOffset={2}></Col>

<Col xsOffset={2}></Col>

<Col xsOffset={2}></Col>

</Row>

</Grid>

);

}

To set offsets for other breakpoints, use mdOffset, smOffset, or lgOffset.

Section 1.2: Pushing and Pulling Columns

We can manipulate the position of columns using the xsPush and xsPull properties. Here’s how you can implement it:

import React from "react";

import { Grid, Row, Col } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<Grid>

<Row>

<Col xsPush={6}></Col>

<Col xsPull={6}></Col>

</Row>

</Grid>

);

}

You can substitute xs with other breakpoints to adjust their positions accordingly.

Section 1.3: Hiding Columns

Columns can also be hidden based on the breakpoints. For instance:

import React from "react";

import { Grid, Row, Col } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<Grid>

<Row>

<Col md={6} xsHidden></Col>

<Col xs={6}></Col>

</Row>

</Grid>

);

}

Here, xsHidden will hide the column once the xs breakpoint is reached.

Chapter 2: Leveraging FlexboxGrid

The FlexboxGrid component allows for a flexible layout within a grid composed of 24 columns. Here’s a basic example of how to implement it:

import React from "react";

import { FlexboxGrid } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<FlexboxGrid>

<FlexboxGrid.Item colspan={6}></FlexboxGrid.Item>

<FlexboxGrid.Item colspan={6}></FlexboxGrid.Item>

<FlexboxGrid.Item colspan={6}></FlexboxGrid.Item>

<FlexboxGrid.Item colspan={6}></FlexboxGrid.Item>

</FlexboxGrid>

);

}

The colspan property specifies the number of columns each item will occupy.

Section 2.1: Layout Justification

You can control how items are displayed using the justify property:

import React from "react";

import { FlexboxGrid } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<FlexboxGrid justify="start">

<FlexboxGrid.Item>col</FlexboxGrid.Item>

<FlexboxGrid.Item>col</FlexboxGrid.Item>

<FlexboxGrid.Item>col</FlexboxGrid.Item>

<FlexboxGrid.Item>col</FlexboxGrid.Item>

</FlexboxGrid>

);

}

Different values for justify-content can be applied here.

Section 2.2: Aligning Items

Additionally, you can set the alignment using the align property:

import React from "react";

import { FlexboxGrid } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<FlexboxGrid align="middle">

<FlexboxGrid.Item>col</FlexboxGrid.Item>

<FlexboxGrid.Item>col</FlexboxGrid.Item>

<FlexboxGrid.Item>col</FlexboxGrid.Item>

<FlexboxGrid.Item>col</FlexboxGrid.Item>

</FlexboxGrid>

);

}

You can utilize any valid align-items value for this property.

Conclusion

In summary, React Suite offers powerful tools for managing column spacing and flexbox containers within your React applications, enabling you to create responsive and dynamic layouts effortlessly.