MotionHold

Tekan dan tahan untuk mengonfirmasi tindakan destruktif; melepas terlalu cepat memundurkannya.

WebReact NativeGestur

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Danger.jsx

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

Yang ditanganinya untuk Anda

Isian bertambah selama pointer, Space, atau Enter ditahan.
Melepas terlalu cepat memundurkan isian, dan menekan lagi saat mundur melanjutkan dari isian saat ini.
Tombol tertekan masuk selama ditahan dan memantul sekali saat terkonfirmasi.

Gunakan untuk

Hapus proyek.
Tahan untuk membayar.
Atur ulang pengaturan.

Props

Prop	Tipe	Bawaan	Deskripsi
`children`	`ReactNode`		Label tombol.
`onConfirm`	`() => void`		Berjalan setelah tahanan selesai.
`duration`	`number`	`1200`	Milidetik tekanan harus ditahan.
`disabled`	`boolean`	`false`	Mematikan tombol.
`fillClassName`	`string`		Class untuk isian yang bertambah; `fillStyle` mengatur gaya inline-nya.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

Beri gaya isian dengan fillClassName atau fillStyle; props lain diteruskan ke button.

Di React Native, aksi aksesibilitas activate langsung mengonfirmasi, karena menahan sulit dilakukan dengan teknologi bantu.

Dipakai di contoh-contoh ini

Ringkasan checkoutJumlah, total per baris, dan total keseluruhan bergulir saat keranjang berubah; pemberitahuan kupon masuk dan pergi; membayar memerlukan tahanan yang disengaja.MotionListMotionNumberMotionPresenceMotionHold