MotionHold

Houd ingedrukt om een destructieve actie te bevestigen; vroeg loslaten spoelt terug.

WebReact NativeGebaren

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Kortste gebruik

Danger.jsx

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

Wat het voor je regelt

De vulling groeit zolang de aanwijzer, spatie of Enter wordt vastgehouden.
Vroeg loslaten spoelt de vulling terug, en midden in het terugspoelen opnieuw drukken gaat verder vanaf de huidige vulling.
De knop drukt in tijdens het vasthouden en springt één keer op bij bevestigen.

Gebruik het voor

Een project verwijderen.
Ingedrukt houden om te betalen.
Instellingen resetten.

Props

Prop	Type	Standaard	Beschrijving
`children`	`ReactNode`		Het knoplabel.
`onConfirm`	`() => void`		Draait zodra het vasthouden voltooid is.
`duration`	`number`	`1200`	Milliseconden dat de knop moet worden ingedrukt.
`disabled`	`boolean`	`false`	Zet de knop uit.
`fillClassName`	`string`		Class voor de groeiende vulling; `fillStyle` zet de inline style.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

Geef de vulling stijl met fillClassName of fillStyle; andere props gaan naar de button.

In React Native bevestigt de toegankelijkheidsactie activeren direct, omdat vasthouden lastig is met hulptechnologie.

Gebruikt in deze voorbeelden

AfrekenoverzichtAantallen, regeltotalen en het totaal rollen als de winkelwagen verandert; de couponmelding komt en gaat; betalen vraagt een bewuste druk.MotionListMotionNumberMotionPresenceMotionHold