StackWrapper

StackWrapper helps you easily and efficiently arrange your desired elements using a flexible layout. This component dynamically adjusts in height and width based on the elements and the device’s screen size. It also allows you to use various properties to customize your design needs.

Features 🚀

• Flexible Horizontal Wrapping
• Customizable Spacing
• Alignment Control
• Fixed Size Option
• Animation Support
• Layout Calculation
• Responsive to Screen Size

---

Configuration ⚙️

Parameter	Type	Default Value	Description
items	[T]	N/A	Required: An array of items conforming to Hashable.
hSpacing	CGFloat	10	Horizontal spacing between items.
vSpacing	CGFloat	10	Vertical spacing between rows.
alignment	HorizontalAlignment	.leading	The alignment of items horizontally.
fixedSize	Bool	true	Whether each item should have a fixed size or not.
animation	Animation?	nil	Optional animation when the container height changed.

---

Usage Guide 📖

First, import StackWrapper package

import StackWrapper

Default Use:

struct MySkills: View {
  
  @State var skills: [String] = ["Swift", "SwiftUI", "UIKit", "Kotlin", "JavaScript", "HTML", "CSS", "React", "Node.js", "Git", "TypeScript", "MongoDB", "Express.js", "REST APIs"]
  
  var body: some View {
    VStack {
      Hwrapper(items: skills) {skill in
        Text(skill)
          .padding(12)
          .background(.yellow)
          .clipShape(RoundedRectangle(cornerRadius: 12))
      }
    }
    .padding()
  }
}

With custom parameters

Hwrapper(items: skills, vSpacing: 10, hSpacing: 20, alignment: .center, fixedSize: true) { skill in
  Text(skill)
    .padding(12)
    .background(.yellow)
    .clipShape(RoundedRectangle(cornerRadius: 12))
}

Animation Support

Smooth transitions when the container’s height increases or decreases

VStack {
   Hwrapper(items: skills, animation: .easeIn) { skill in
    Text(skill)
    .padding(12)
    .background(.yellow)
    .clipShape(RoundedRectangle(cornerRadius: 12))
  }
      
  Button("Delete Skill") {
    skills.removeLast()
  }
   .buttonStyle(.borderedProminent)
}

Installation via Swift Package Manager 🖥️

• Open your project.
• Go to File → Add Package Dependencies.
• Enter URL: https://github.com/Desp0o/StackWrapper.git
• Click Add Package.

Contact 📬

• Email: [email protected]
• LinkedIn: https://www.linkedin.com/in/tornike-despotashvili-250150219/
• github: https://github.com/Desp0o