Open In App

React Suite <Stack> Props

Last Updated : 05 Jul, 2022
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> 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



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads