MotionHold

Maintenez appuyé pour confirmer une action destructive ; relâcher trop tôt fait revenir en arrière.

WebReact NativeGestes

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

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;
}

Usage minimal

Danger.jsx

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

Ce qu’il gère pour vous

Le remplissage progresse tant que le pointeur, Espace ou Entrée est maintenu.
Relâcher trop tôt fait reculer le remplissage, et appuyer de nouveau pendant le recul repart du remplissage actuel.
Le bouton s’enfonce pendant l’appui et rebondit une fois à la confirmation.

À utiliser pour

Supprimer un projet.
Maintenir pour payer.
Réinitialiser les réglages.

Props

Prop	Type	Défaut	Description
`children`	`ReactNode`		Le libellé du bouton.
`onConfirm`	`() => void`		S’exécute une fois l’appui maintenu terminé.
`duration`	`number`	`1200`	Millisecondes pendant lesquelles l’appui doit être maintenu.
`disabled`	`boolean`	`false`	Désactive le bouton.
`fillClassName`	`string`		Classe du remplissage qui progresse ; `fillStyle` définit son style en ligne.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

Stylez le remplissage avec fillClassName ou fillStyle ; les autres props vont au button.

Sur React Native, l’action d’activation d’accessibilité confirme directement, car maintenir appuyé est difficile avec les technologies d’assistance.

Utilisé dans ces exemples

Récapitulatif de commandeLes quantités, les totaux par ligne et le total défilent quand le panier change ; l’avis de code promo entre et sort ; payer demande un appui maintenu délibéré.MotionListMotionNumberMotionPresenceMotionHold