Swipe actions

Introduction

The Swipe actions example shows how to implement an iOS-style swipe gesture interface where swiping an item left or right reveals contextual actions. This pattern is commonly used in mobile UIs for actions like archive, delete, or flag, providing a space-efficient alternative to having these actions permanently visible.

This tutorial explores several advanced Motion for React APIs:

• useMotionValue to track the swipe position
• useTransform to derive styles from the swipe amount
• useSpring to add realistic physics to the animations
• animate to manually trigger animations
• useMotionValueEvent to trigger events when motion values change

Get started

Let's start with the basic structure of our component:

"use client"

import { useCallback, useEffect, useRef, useState } from "react"

import { Archive, Clock9, Flag, MailOpen } from "lucide-react"
import type { LucideIcon } from "lucide-react"

const ITEM_HEIGHT = 80
const ITEM_MAX_WIDTH = 384

const SPRING_OPTIONS = {
    stiffness: 900,
    damping: 80,
}

export default function SwipeActions() {
    const [isSwiping, setIsSwiping] = useState(false)

    const swipeItemRef = useRef(null)
    const swipeItemWidth = useRef(0)
    const swipeStartX = useRef(0)
    const swipeStartOffset = useRef(0)
    const fullSwipeSnapPosition = useRef(null)
    const swipeContainerRef = useRef(null)

    return (
        <div style={styles.outerContainer}>
            <motion.div ref={swipeContainerRef} style={styles.swipeContainer}>
                <div style={styles.swipeItem}>
                    <SwipeItemContent />
                </div>
            </motion.div>
        </div>
    )
}

// We'll define these components later
const SwipeItemContent = () => {
    return (
        <div style={styles.swipeItemContent}>
            <div style={styles.messageContent}>
                <div style={styles.messageHeader}>
                    <div style={styles.messageTitle}>Welcome to Inbox</div>
                    <div style={styles.messageTime}>9:41 AM</div>
                </div>
                <div style={styles.messageText}>
                    Swipe left or right to see available actions
                </div>
            </div>
        </div>
    )
}

/**
 * ==============   Styles   ================
 */
/** Copy styles from example source code */