React Suite Stack Wrap

0 0 2 minutes read

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>zambiatek</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>zambiatek</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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!