{"id":13751870,"url":"https://github.com/dadalar/SwiftUI-CardStackView","last_synced_at":"2025-05-09T18:32:45.642Z","repository":{"id":37714527,"uuid":"255439637","full_name":"dadalar/SwiftUI-CardStackView","owner":"dadalar","description":"A easy-to-use SwiftUI view for Tinder like cards on iOS, macOS \u0026 watchOS.","archived":false,"fork":false,"pushed_at":"2023-09-01T18:39:21.000Z","size":4266,"stargazers_count":429,"open_issues_count":8,"forks_count":45,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-03-16T05:34:56.346Z","etag":null,"topics":["swift","swift-framework","swift-library","swiftui","tinder-cards"],"latest_commit_sha":null,"homepage":null,"language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dadalar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-04-13T20:54:45.000Z","updated_at":"2024-03-14T21:23:28.000Z","dependencies_parsed_at":"2024-01-16T14:04:02.238Z","dependency_job_id":"07f9a960-5826-4d2c-981a-719fdffa1d37","html_url":"https://github.com/dadalar/SwiftUI-CardStackView","commit_stats":{"total_commits":10,"total_committers":4,"mean_commits":2.5,"dds":"0.30000000000000004","last_synced_commit":"9b45ef54b9e7bfbee46fe4a5982ecf449ac2b47c"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dadalar%2FSwiftUI-CardStackView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dadalar%2FSwiftUI-CardStackView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dadalar%2FSwiftUI-CardStackView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dadalar%2FSwiftUI-CardStackView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dadalar","download_url":"https://codeload.github.com/dadalar/SwiftUI-CardStackView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224859688,"owners_count":17381682,"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":["swift","swift-framework","swift-library","swiftui","tinder-cards"],"created_at":"2024-08-03T09:00:56.323Z","updated_at":"2024-11-16T04:31:55.633Z","avatar_url":"https://github.com/dadalar.png","language":"Swift","funding_links":[],"categories":["Card","🛠 Examples","🌎 by the community"],"sub_categories":["Content","Libraries"],"readme":"# 🃏 CardStack\n\n[![Swift](https://img.shields.io/badge/swift-5.1-brightgreen.svg?style=flat)](https://swift.org)\n[![Version](https://img.shields.io/cocoapods/v/SwiftUICardStack.svg?style=flat)](http://cocoapods.org/pods/SwiftUICardStack)\n[![License](https://img.shields.io/cocoapods/l/SwiftUICardStack.svg?style=flat)](http://cocoapods.org/pods/SwiftUICardStack)\n[![Platform](https://img.shields.io/cocoapods/p/SwiftUICardStack.svg?style=flat)](http://cocoapods.org/pods/SwiftUICardStack)\n\nA easy-to-use SwiftUI view for Tinder like cards on iOS, macOS \u0026 watchOS.\n\n![Alt text](/Example/example.gif?raw=true \"CardStack example gif\")\n\n## Installation\n\n### Xcode 11 \u0026 Swift Package Manager\n\nUse the package repository URL in Xcode or SPM package.swift file: `https://github.com/dadalar/SwiftUI-CardStackView.git`\n\n### CocoaPods\n\nCardStack is available through [CocoaPods](http://cocoapods.org). To install it, simply add the following line to your Podfile:\n\n```ruby\npod \"SwiftUICardStack\"\n```\n\n## Usage\n\nThe usage of this component is similar to SwiftUI's List. A basic implementation would be like this:\n\n```swift\n@State var cards: [Card] // This is the data to be shown in CardStack\n\nCardStack(\n  direction: LeftRight.direction, // See below for directions\n  data: cards,\n  onSwipe: { card, direction in // Closure to be called when a card is swiped.\n    print(\"Swiped \\(card) to \\(direction)\")\n  },\n  content: { card, direction, isOnTop in // View builder function\n    CardView(card)\n  }\n)\n```\n\n### Direction\n\nCardStack needs to know which directions are available and how a swipe angle can be transformed into that direction. This is a conscious decision to make the component easily extendable while keeping type safety. The argument that needs to be passed to CardStack Initializer is a simple `(Double) -\u003e Direction?` function. The Double input here is the angle in degrees where 0 points to up and 180 points to down. Direction is a generic type, that means users of this library can use their own types. Return nil from this function to indicate that that angle is not a valid direction (users won't be able to swipe to that direction).\n\nThere are the following predefined directions (`LeftRight`, `FourDirections`, `EightDirections`) and each of them define a direction(double:) function which can used in the CardStack Initializer. You can check the example project for a custom direction implementation.\n\n### Configuration\n\nCardStack can be configured with SwiftUI's standard environment values. It can be directly set on the CardStack or an encapsulating view of it. \n\n```swift\nCardStack(\n  // Initialize\n)\n.environment(\\.cardStackConfiguration, CardStackConfiguration(\n  maxVisibleCards: 3,\n  swipeThreshold: 0.1,\n  cardOffset: 40,\n  cardScale: 0.2,\n  animation: .linear\n))\n```\n\n### Use case: Appending items\n\nIt's really easy to load new data and append to the stack. Just make sure the data property is marked as `@State` and then you can append to the array. Please check the example project for a real case scenario.\n\n```swift\nstruct AddingCards: View {\n  @State var data: [Person] // Some initial data\n\n  var body: some View {\n    CardStack(\n      direction: LeftRight.direction,\n      data: data,\n      onSwipe: { _, _ in },\n      content: { person, _, _ in\n        CardView(person: person)\n      }\n    )\n    .navigationBarItems(trailing:\n      Button(action: {\n        self.data.append(contentsOf: [ /* some new data */ ])\n      }) {\n        Text(\"Append\")\n      }\n    )\n  }\n}\n```\n\n### Use case: Reload items\n\nSince the component keeps an internal index of the current card, changing the order of the data or appending/removing items before the current item will break the component. If you want to replace the whole data, you need to force SwiftUI to reconstruct the component by changing the id of the component. Please check the example project for a real case scenario.\n\n```swift\nstruct ReloadCards: View {\n  @State var reloadToken = UUID()\n  @State var data: [Person] = Person.mock.shuffled()\n\n  var body: some View {\n    CardStack(\n      direction: LeftRight.direction,\n      data: data,\n      onSwipe: { _, _ in },\n      content: { person, _, _ in\n        CardView(person: person)\n      }\n    )\n    .id(reloadToken)\n    .navigationBarItems(trailing:\n      Button(action: {\n        self.reloadToken = UUID()\n        self.data = Person.mock.shuffled()\n      }) {\n        Text(\"Reload\")\n      }\n    )\n  }\n}\n```\n\n## Author\n\nDeniz Adalar, me@dadalar.net\n\n## License\n\nCardStack is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdadalar%2FSwiftUI-CardStackView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdadalar%2FSwiftUI-CardStackView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdadalar%2FSwiftUI-CardStackView/lists"}