MotionHold

Gedrückt halten, um eine destruktive Aktion zu bestätigen; zu frühes Loslassen spult zurück.

WebReact NativeGesten

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

App.jsx

import { useState } from 'react';
import { MotionHold, MotionSwap } from '@kkwaenggwari/animated-chorus';
import './styles.css';

export default function App({ duration = 1200 }) {
  const [deleted, setDeleted] = useState(false);

  return (
    <div className="stage">
      <div className="project">
        <MotionSwap value={deleted ? 'deleted' : 'live'} effect="up">
          {deleted ? 'Project deleted' : 'Project: Aurora'}
        </MotionSwap>
      </div>
      {deleted ? (
        <button className="restore" onClick={() => setDeleted(false)}>
          Restore project
        </button>
      ) : (
        <MotionHold
          className="hold"
          fillClassName="fill"
          duration={duration}
          onConfirm={() => setDeleted(true)}
        >
          Hold to delete
        </MotionHold>
      )}
      <p className="hint">Release early and the fill rewinds. Space and Enter work too.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 44px 20px;
}

.project {
  font:
    750 24px system-ui,
    sans-serif;
  color: #0e2e24;
}

.hold {
  position: relative;
  min-height: 52px;
  padding: 0 28px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid #0e2e24;
  border-radius: 999px;
  background: #fff;
  font:
    700 16px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #43c58f;
}

.restore {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

Kürzeste Nutzung

Danger.jsx

<MotionHold duration={1200} onConfirm={deleteProject}>
  Hold to delete
</MotionHold>;

Was sie dir abnimmt

Die Füllung wächst, solange Zeiger, Leertaste oder Enter gehalten werden.
Zu frühes Loslassen spult die Füllung zurück, und ein erneuter Druck während des Zurückspulens setzt bei der aktuellen Füllung an.
Der Button gibt beim Halten nach und federt bei der Bestätigung einmal.

Gut für

Ein Projekt löschen.
Zum Bezahlen halten.
Einstellungen zurücksetzen.

props

Prop	Typ	Standard	Beschreibung
`children`	`ReactNode`		Die Button-Beschriftung.
`onConfirm`	`() => void`		Läuft einmal, wenn das Halten abgeschlossen ist.
`duration`	`number`	`1200`	Millisekunden, die der Druck gehalten werden muss.
`disabled`	`boolean`	`false`	Schaltet den Button aus.
`fillClassName`	`string`		Klasse für die wachsende Füllung; `fillStyle` setzt ihren Inline-Style.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

Gestalte die Füllung mit fillClassName oder fillStyle; weitere props gehen an den button.

Unter React Native bestätigt die Barrierefreiheitsaktion „Aktivieren“ direkt, weil Halten mit Hilfstechnologien schwierig ist.

Verwendet in diesen Beispielen

Checkout-ÜbersichtMengen, Zeilensummen und die Gesamtsumme rollen, wenn sich der Warenkorb ändert; der Gutscheinhinweis erscheint und verschwindet; Bezahlen erfordert bewusstes Halten.MotionListMotionNumberMotionPresenceMotionHold