Contents

Desp0o/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()
  }
}

<img width="228" alt="Image" src="https://github.com/user-attachments/assets/61363b09-f303-44c6-9161-2d3513b35e3d" />

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))
}

<img width="228" alt="Image" src="https://github.com/user-attachments/assets/d695e335-bdc8-4931-ac63-8906e905e85f" />

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)
}

[Image]

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: tornike.despotashvili@gmail.com
  • LinkedIn: https://www.linkedin.com/in/tornike-despotashvili-250150219/
  • github: https://github.com/Desp0o

Package Metadata

Repository: Desp0o/StackWrapper

Stars: 8

Forks: 1

Open issues: 0

Default branch: main

Primary language: swift

License: MIT

Topics: hstack, ios, layout, layoutwrapper, spm, stack, stackwrapper, swift, swiftui, wrapper

README: README.md