Open In App

React Suite Stack Dividers

Improve
Improve
Like Article
Like
Save
Share
Report

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 Dividers. A divider in a stack adds an element between each child used in a stack.

Syntax:

function App() {
    return (
         <Stack divider={<Divider vertical />}>
              ...
         </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 divider used 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>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Stack Divider
                </h4>
            </div>
            <div
                style={{
                    textAlign: "center",
                    padding: 20,
                }}
            >
                <Stack divider={<Divider vertical />}>
                    <Button>Item 1</Button>
                    <Button>Item 2</Button>
                    <Button>Item 3</Button>
                </Stack>
            </div>
        </div>
    );
}


Output:

 

Example 2: Below example demonstrates a text-based divider used 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>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Stack Divider
                </h4>
            </div>
            <div
                style={{
                    textAlign: "center",
                    padding: 20,
                }}
            >
                <Stack divider={<Divider>GFG</Divider>}>
                    <Button appearance="primary" 
                        color="blue">Sign Up</Button>
                    <Button appearance="primary" 
                        color="green">Log In</Button>
                    <Button>Cancel</Button>
                </Stack>
            </div>
        </div>
    );
}


Output:

 

Reference: https://rsuitejs.com/components/stack/#dividers



Last Updated : 28 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads