React Suite Cascader Container and Prevent Overflow

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 Cascader Container and Prevent Overflow.

A cascader is used for a single selection of data with a hierarchical relationship structure. The preventOverflow prop helps in positioning the cascader components in the scrolling container.

Syntax:

<PreventOverflowContainer>
 {getContainer => (
 <Cascader
 preventOverflow
 container={getContainer}
 data={...}
 ...
 />
 )}
</PreventOverflowContainer>

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 preventOverflow of Cascader Component in a container.

Output:

Example 2: Below is another example that demonstrates the preventOverflow of cascader component with a subtle appearance in a container.

Output:

Reference: https://rsuitejs.com/components/cascader/#container-and-prevent-overflow