{"id":13872081,"url":"https://github.com/swiftui-library/hstack-snap-to-scroll","last_synced_at":"2025-07-16T01:32:44.173Z","repository":{"id":40480567,"uuid":"401358571","full_name":"swiftui-library/hstack-snap-to-scroll","owner":"swiftui-library","description":"Easy-to-use HStack that snaps to elements on scroll.","archived":false,"fork":false,"pushed_at":"2024-04-04T10:38:09.000Z","size":505,"stargazers_count":251,"open_issues_count":6,"forks_count":23,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-08-06T23:51:27.845Z","etag":null,"topics":["flowlayout","hstack","scroll","snap","swiftui"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/swiftui-library.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-08-30T13:44:37.000Z","updated_at":"2024-08-04T04:53:18.000Z","dependencies_parsed_at":"2023-01-31T08:01:23.782Z","dependency_job_id":"70d8b8ba-9caa-433f-8775-32414a7eee9d","html_url":"https://github.com/swiftui-library/hstack-snap-to-scroll","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swiftui-library%2Fhstack-snap-to-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swiftui-library%2Fhstack-snap-to-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swiftui-library%2Fhstack-snap-to-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swiftui-library%2Fhstack-snap-to-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swiftui-library","download_url":"https://codeload.github.com/swiftui-library/hstack-snap-to-scroll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226090030,"owners_count":17572114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flowlayout","hstack","scroll","snap","swiftui"],"created_at":"2024-08-05T23:00:33.369Z","updated_at":"2024-11-23T19:31:34.091Z","avatar_url":"https://github.com/swiftui-library.png","language":"Swift","funding_links":[],"categories":["Swift"],"sub_categories":[],"readme":"# SnapToScroll\n\nDrop-in SwiftUI-based container view for horizontal snapping. \n\nTo see the rest of the SwiftUI Library, visit [our website](https://swiftuilibrary.com). \n\nhttps://user-images.githubusercontent.com/8763719/131696736-0474ae54-35ad-4579-ab1e-366ae101949b.mp4\n\n## Getting Started\n\nUsing `SnapToScroll` is straightforward. There's just three steps.\n\n1. Import `SnapToScroll`\n2. Replace `HStack` with `HStackSnap`\n3. Add `.snapAlignmentHelper` to your view.\n\nAn example:\n\n```swift\nimport SnapToScroll                               // Step 1\n...\n\nHStackSnap(alignment: .center(32)) {              // Step 2\n\n    ForEach(myModels) { viewModel in\n\n        MyView(\n            selectedIndex: $selectedIndex,\n            viewModel: viewModel\n         )\n         .snapAlignmentHelper(id: viewModel.id)   // Step 3\n     }\n}                  \n```\nFor more examples, see `SnapToScrollDemo/ContentView.swift`.\n\n## Configuration\n\n`HStackSnap` comes with two customizable properties:\n\n- `alignment`: The way you'd like your elements to be arranged. \n    - `leading(CGFloat)`: Aligns your child views to the leading edge of `HStackSnap`. This configuration supports elements of various sizes, so long as they don't take up all available horizontal space (which would extend beyond the screen). Use the value to set the size of the left offset.\n    - `center(CGFloat)`: Automatically aligns your child view to the center of the screen, using the offset value you've provided. This is accomplished with inside of the `.snapAlignmentHelper` which sets the frame width based on the available space. Note that setting your own width elsewhere may produce unexpected layouts.\n- `coordinateSpace`: Option to set custom name for the coordinate space, in the case you're using multiple `HStackSnap`s of various sizes. If you use this, set the same value in `.snapAlignmentHelper`.\n\n`.snapAlignmentHelper` comes with two options as well:\n\n- `id`: Required. A unique ID for the element. \n- `coordinateSpace`: Same as above.\n\n## Limitations\n\n- `HStackSnap` is currently designed to work with static content. \n\n## How it Works\n\nAt render, `HStackSnap` reads the frame data of each child element and calculates the `scrollOffset` each element should use. Then, on `DragGesture.onEnded`, the nearest snap location is calculated, and the scroll offset is set to this point.\n\nRead through `HStackSnap.swift` and `Views/HStackSnapCore.swift` for more details.\n\n## Credits\n\nThanks to pixeltrue for the [illustrations](https://www.pixeltrue.com/scenic-illustrations#download) used in example 2.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswiftui-library%2Fhstack-snap-to-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswiftui-library%2Fhstack-snap-to-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswiftui-library%2Fhstack-snap-to-scroll/lists"}