React Suite Stack Dividers
Last Updated :
28 Jul, 2022
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
Share your thoughts in the comments
Please Login to comment...