Giter Club home page Giter Club logo

swiper's Introduction

Swiper ๐ŸŽด

Swift version Platform License

A SwiftUI generic swipeable card stack as in dating apps.

Features

  • Generic: The container can be used with any View and Data
  • Lazy: Only renders the visible cards for better performance and less memory usage
  • Customization: Allows card customization with user action (ex: like/dislike overlay)
  • Rollback support: Allows the user to rollback to the previous card.
  • Action buttons: You can provide custom buttons to call like/dislike/rollback actions. These buttons could be integrated to your cards or at the bottom of the cards.

Installation

Swift Package Manager

  1. Go to File -> Add Packages...

  2. Type [email protected]:smatado/Swiper.git in the search bar.

  3. Click on Add Package.

That's it! The Swift package will be added to your project.

Usage

Basic Usage

struct ContentView: View {
    
    @State var items: [Item] = ...

    var body: some View {
        SwipeStack(data: $items) { item, swipeDirection in
            // Provide your custom card here. You can pass the current swipe direction for overlay customization
            YourCard()
        } onSwipe: { swipeDirection in
            // Handle swipe here, swipe direction could be .leading, or .trailing
        }
    }
}

Custom action buttons

struct ContentView: View {
    
    @State var items: [Item] = ...
    
    // Create a SwipeStackProxy to control swipe actions programmatically.
    @State private var swipeStackProxy = SwipeStackProxy() 

    var body: some View {
        VStack {
            SwipeStack(data: $items, proxy: $swipeStackProxy) { item, swipeDirection in
                // Provide your custom card here. You can pass the current swipe direction for overlay customization
                YourCard()
            } onSwipe: { swipeDirection in
                // Handle swipe here, swipe direction could be .leading, or .trailing
            } onRollback: { rollbackDirection in
                // Handle rollback here, rollback direction could be .leading, or .trailing
            }
            .zIndex(1) // Make sure the card will be above the buttons
            
            // Create your own buttons to trigger swipe left, swipe right and rollback here.
            HStack {
                Button(action: {
                    // Trigger actions from the Swipe Stack Proxy
                    swipeStackProxy.swipe(.leading)
                }) {
                    Text("Like")
                }
                
                /* add your swipe right and rollback button here... */
            }
        }
    }
}

Customizing the behavior and appearance

struct ContentView: View {
    
    @State var items: [CardModel] = (10...1000).map { CardModel(id: $0) }
    @State private var swipeStackProxy = SwipeStackProxy()

    var body: some View {
        SwipeStack(data: $items,
                   configuration: SwipeStackConfiguration(
                    rotationRatio: 0.05, // The ratio of rotation applied to the card during a swipe.
                    swipeThreshold: 50.0, // The distance for triggering a swipe action.
                    maxCardScale: 1.2, // The maximum scale applied to the top card during a swipe.
                    scaleEffectAdjustmentFactor: 0.0025, // The factor by which the scale effect is adjusted during a swipe.
                    shadowRadiusScalingFactor: 0.1 // The factor by which the shadow radius is scaled during a swipe.
                   )
        ) { item, swipeDirection in
            YourCard()
        } onSwipe: { swipeDirection in

        }
    }
}

Contributing

Contributions and suggestions are welcome! To contribute to this library, please fork this repository or submit a pull request with your changes.

License

This library is released under the MIT license. See LICENSE for more information.

swiper's People

Contributors

smatado avatar

Stargazers

Jiong avatar Dardania avatar

Watchers

 avatar

swiper's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.