React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.
In this article, we’ll learn about React Suite Stack Wrap. A stack wrap is a prop that defines whether the children in the stack are forced onto one line or can wrap onto multiple lines.
Syntax:
function App() {
return (
<Stack wrap spacing={4}>
...
</Stack>
);
}
Creating React Application And Installing Module:
Step 1: Create a React application using the given command:
npm create-react-app projectname
Step 2: After creating your project, move to it using the given command:
cd projectname
Step 3: Now Install the rsuite node package using the given command:
npm install rsuite
Project Structure: Now your project structure should look like the following:
Example 1: Below example demonstrates a basic implementation of wrapping elements in a stack.
Javascript
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { Button, Stack } from "rsuite"; export default function App() { return ( <div> <div style={{ textAlign: "center" }}> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Stack Wrap </h4> </div> <div style={{ textAlign: "center", padding: 20, }}> <Stack wrap spacing={6}> <Button>Button 1</Button> <Button>Button 2</Button> <Button>Button 3</Button> <Button>Button 4</Button> <Button>Button 5</Button> <Button>Button 6</Button> <Button>Button 7</Button> <Button>Button 8</Button> <Button>Button 9</Button> <Button>Button 10</Button> <Button>Button 11</Button> <Button>Button 12</Button> <Button>Button 13</Button> <Button>Button 14</Button> <Button>Button 15</Button> <Button>Button 16</Button> <Button>Button 17</Button> <Button>Button 18</Button> <Button>Button 19</Button> <Button>Button 20</Button> </Stack> </div> </div> ); } |
Output:
Example 2: Below example demonstrates a wrapping of elements along with a divider in between in a stack.
Javascript
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { Button, Divider, Stack } from "rsuite"; export default function App() { return ( <div> <div style={{ textAlign: "center" }}> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Stack Wrap </h4> </div> <div style={{ textAlign: "center", padding: 20, }}> <Stack wrap spacing={4} divider={<Divider vertical />}> <Button>Button 1</Button> <Button>Button 2</Button> <Button>Button 3</Button> <Button>Button 4</Button> <Button>Button 5</Button> <Button>Button 6</Button> <Button>Button 7</Button> <Button>Button 8</Button> <Button>Button 9</Button> <Button>Button 10</Button> <Button>Button 11</Button> <Button>Button 12</Button> <Button>Button 13</Button> <Button>Button 14</Button> <Button>Button 15</Button> </Stack> </div> </div> ); } |
Output:
Reference: https://rsuitejs.com/components/stack/#wrap
