"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; export type BeforeAfterProps = { before: React.ReactNode; after: React.ReactNode; beforeLabel?: string; afterLabel?: string; /** Starting position, 0–100. */ defaultPosition?: number; className?: string; }; /** Drag (or arrow-key) slider that reveals one image over another. */ export function BeforeAfter({ before, after, beforeLabel = "Before", afterLabel = "After", defaultPosition = 50, className }: BeforeAfterProps) { const [pos, setPos] = React.useState(defaultPosition); const ref = React.useRef(null); const dragging = React.useRef(false); const fromEvent = (clientX: number) => { const r = ref.current!.getBoundingClientRect(); setPos(Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100))); }; return (

{ dragging.current = true; e.currentTarget.setPointerCapture(e.pointerId); fromEvent(e.clientX); }} onPointerMove={(e) => dragging.current && fromEvent(e.clientX)} onPointerUp={() => (dragging.current = false)} >

{after}

{before}

12 ? 1 : 0 }}> {beforeLabel} {afterLabel}

); }

Before / After

Installation

Exports