Wipe

Two versions of one picture in one frame: before left of the split and after right of it, with a handle between them to drag or move with the arrow keys.

import { Wipe } from '@basmilius/react-ui';

import { useState } from 'react';
import { Wipe } from '@basmilius/react-ui';

function Frame({ label, className }: { label: string; className: string }) {
    return (
        <div className={`grid h-full w-full place-items-center text-sm font-medium ${className}`}>
            <span className="rounded-md bg-surface/80 px-2 py-1 text-text">{label}</span>
        </div>
    );
}

export default function WipeDemo() {
    const [split, setSplit] = useState(0.5);

    return (
        <div className="relative h-64 w-full max-w-xl overflow-hidden rounded-lg">
            <Wipe
                label="Compare the two renders"
                value={split}
                onValueChange={setSplit}
                before={<Frame label="Before" className="bg-surface-sunken" />}
                after={<Frame label="After" className="bg-accent-soft" />}
            />
        </div>
    );
}

The wipe fills the positioned element it sits in. value is the share of the width left of the handle, from 0 to 1. The handle is a line with a round knob on it by default; handle="line" draws the plain line, which a person drags anywhere along its height. The handle keeps its colors in both themes, since it sits on a picture and not on the interface.

Keyboard

The handle is a slider in the tab order. The left and right arrows move it 2 percent, Home and End to either edge. It only answers those keys while it has the focus, and stops them there, so a canvas or a timeline around it never hears them. A screen reader hears the position as a percentage.

Props

Prop	Type	Default
value	number		Required.
onValueChange	(value: number) => void		Required.
before	ReactNode		Required.
after	ReactNode		Required.
label	string		Required. The slider's accessible name.
handle	'knob' | 'line'	'knob'
className	string
ref	Ref<HTMLDivElement>

WipeProps is an exported type.