Bringing SwiftUI Stacks to the Web
2 min readWith the introduction of SwiftUI came a refined API to control UI layout. In this post, we'll look at how we can transfer these paradigms to the web.
If you’d like the history on Stack layouts and why they are useful, please check out my other post Easier Layouts with Stacks.
Today we’ll be using React and Emotion, but the same principles should apply to any library that supports components or templates.
HStack
Responsible for arranging views horizontally, we can use a simple Grid with autoFlow set to column. This will make sure as children are added, they default to creating new columns.
VStack
Similar to HStack we can set autoFlow to row. This will make sure as children are added, they default to creating new rows.
ZStack
This primitive is responsible for overlaying children and aligning them on both axes. We use placeItems to align both axes of our children and set each immediate child to gridArea: 1/1. This will place children on top of one another, similar to position absolute, but preserving the layout.
And that’s it! Now we have layout primitives similar to SwiftUI 🎉
- development
- react
- swiftui