React Suite <Stack> Props
Last Updated :
05 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> props. <Stack> component is used to layout components through Flexbox which also supports vertical or horizontal stacking and supports custom spacing and wraps.
<Stack> Props:
- alignItems: It is used to define the alignment of the children in the stack on the cross axis.
- classPrefix: It denotes the prefix of the component CSS class.
- direction: It defines the direction of the children in the stack.
- divider: It adds an element between each child.
- justifyContent: It defines the alignment of the children in the stack on the inline axis.
- spacing: It defines the spacing between immediate children.
- wrap: It defines whether the children in the stack are forced onto one line or can wrap onto multiple lines.
Syntax:
<Stack direction={direction} alignItems={alignment}
justifyContent={justifyContent}>
...
</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 the spacing prop of <Stack>.
JavaScript
import "rsuite/dist/rsuite.min.css";
import { Button, Input, Stack } from "rsuite";
export default function App() {
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Stack Prop
</h4>
<div style={{ marginTop: 20, width: 340 }}>
<Stack spacing={10}>
<Input placeholder="Enter your email" />
<Button appearance="primary"
color="green">Apply</Button>
<Button>Reset</Button>
</Stack>
</div>
</div>
</center>
);
}
Output:
Example 2: Below example demonstrates the direction, alignItems, divider, and spacing props of <Stack>.
JavaScript
import "rsuite/dist/rsuite.min.css";
import { Button, Divider, Input, Radio,
RadioGroup, Stack } from "rsuite";
import { useState } from "react";
export default function App() {
const [alignItems, setAlignItems] = useState('flex-start');
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite Stack Prop
</h4>
<div style={{ marginTop: 20, width: 500 }}>
<Stack spacing={6} direction="column"
divider={<Divider vertical />}
alignItems={alignItems}>
<Input placeholder="Enter your email" />
<Input placeholder="Enter your phone" />
<Button appearance="primary" color="green">
Submit
</Button>
</Stack>
<hr />
<Stack>
<label>Align Items:</label>
<RadioGroup inline value={alignItems}
onChange={setAlignItems}>
<Radio value="flex-start">flex-start</Radio>
<Radio value="center">center</Radio>
<Radio value="flex-end">flex-end</Radio>
</RadioGroup>
</Stack>
</div>
</div>
</center>
);
}
Output:
Reference: https://rsuitejs.com/components/stack/#code-lt-stack-gt-code