MotionHold

Mantén pulsado para confirmar una acción destructiva; si sueltas antes, retrocede.

WebReact NativeGestos

Pruébalo

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo completo.

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

Uso mínimo

Danger.jsx

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

Lo que resuelve por ti

El relleno crece mientras se mantienen pulsados el puntero, Espacio o Intro.
Soltar antes hace retroceder el relleno, y volver a pulsar a mitad del retroceso continúa desde el relleno actual.
El botón se hunde mientras se mantiene y rebota una vez al confirmar.

Úsalo para

Borrar un proyecto.
Mantener pulsado para pagar.
Restablecer los ajustes.

Props

Prop	Tipo	Por defecto	Descripción
`children`	`ReactNode`		La etiqueta del botón.
`onConfirm`	`() => void`		Se ejecuta una vez cuando se completa la pulsación.
`duration`	`number`	`1200`	Milisegundos que hay que mantener pulsado.
`disabled`	`boolean`	`false`	Desactiva el botón.
`fillClassName`	`string`		Clase para el relleno que crece; `fillStyle` fija su estilo en línea.

Las demás props van al elemento renderizado, así que className, style y los manejadores de eventos funcionan como siempre.

Web y React Native

Dale estilo al relleno con fillClassName o fillStyle; las demás props van al button.

En React Native, la acción de activar de accesibilidad confirma directamente, porque mantener pulsado es difícil con tecnologías de apoyo.

Se usa en estos ejemplos

Resumen del pagoLas cantidades, los subtotales y el total ruedan cuando cambia el carrito; el aviso del cupón entra y sale; pagar requiere mantener pulsado a propósito.MotionListMotionNumberMotionPresenceMotionHold