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