Wrap

⦾ The Wrap component in Chakra UI is a useful layout component that provides spacing and automatic wrapping for elements. It functions as a flexbox container with support for flex-wrap and spacing, making it particularly useful for organizing items such as dialog buttons, tags, and chips. The Wrap component wraps elements automatically when there isn't enough space to display them on a single line.

The Wrap component itself is composed of two main sub-components: Wrap and WrapItem. The Wrap component is built on top of the Box component and renders a <ul> tag, while the WrapItem component is also based on the Box component and renders an HTML <li> tag.

Wrap: a high-level component that acts as the container for the wrapped items and provides the necessary layout and wrapping functionality.
WrapItem: sub-component of the Wrap component, which is used to wrap individual items within the Wrap component. Each WrapItem represents an item to be wrapped and positioned within the container.

These components can be imported as follows:

Examples

Basic Usage

⦾ To visualize the basic usage of the Wrap component, let's consider an example where we have six boxes of varying widths that need to be wrapped if there isn't enough space to fit them horizontally.

In this example, we create a Wrap component and nest WrapItem components inside it. Each WrapItem contains a Center component that acts as a container for our content. The Wrap component ensures that the boxes wrap to the next line when there isn't enough space horizontally.

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6

Code

Customizing WrapItem Spacing

⦾ The Wrap component allows us to apply consistent spacing between each child element, even when they wrap. We can achieve this by using the spacing prop. By specifying a value, such as '30px', we can control the spacing between the wrapped items. Additionally, it's possible to use responsive values for the spacing, providing flexibility in adapting the layout based on different screen sizes.

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6

Code

Customizing Wrap Justification

⦾ The Wrap component allows us to modify the alignment of the wrapped items along the main axis using the justify prop. In the following example, by setting the justify prop to 'center', the child elements will be centered horizontally. This is helpful when we want the wrapped items to be aligned in the center of the container.

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6

Code

Customizing Wrap Alignment

⦾ You can also adjust the alignment of the wrapped items along the cross-axis using the align prop. The default value is 'flex-start', which aligns the items to the top. By setting the align prop to 'center', the child elements will be centered vertically. This feature is particularly useful when you have items of varying heights within the Wrap component. In this example, the items again have a 30px spacing, but this time their heights vary rather than their widths.

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6

Code

Did you know?

Creative Idea No. 1

Wrapping Tags: You can use the Wrap component to display product tags, filtering tags, and various other tag lists in a flexible and space-efficient manner. Product tags are a common feature in e-commerce websites, and using the Wrap component can provide an organized and visually appealing presentation. In this implementation, each WrapItem contains a Tag component that represents a product tag. With the Wrap component and appropriate spacing, the tags will be automatically wrapped to the next line when necessary, allowing for efficient use of space and improved readability.

Your Tags:

Electronics
Fashion
Home & Kitchen
Sports
Books
Beauty
Toys

Code

Creative Idea No. 2

Wrapping Filter Options: Similarly to the implementation above, you can use the Wrap component to create a flexible and interactive filter options layout. Filters are commonly used in search interfaces to refine results, and using the Wrap component can provide a user-friendly experience.

Filter by:

Code

Creative Idea No. 3

Responsive Image Gallery: You can use the Wrap component to create an image gallery with automatic wrapping This can be particularly useful when you have a dynamic set of images and want to display them in a visually appealing grid-like layout. In this example, with the Wrap component and proper spacing, the images will be automatically wrapped to the next line when there isn't enough space horizontally, creating a visually appealing image gallery.