MotionHold

되돌리기 어려운 동작을 길게 눌러 확정합니다. 일찍 떼면 되감깁니다.

웹React Native제스처

직접 해 보기

예제를 준비하는 중…

JavaScript가 꺼져 있습니다. 아래 코드가 예제 전체입니다.

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

가장 짧은 사용법

Danger.jsx

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

대신 처리하는 일

포인터, Space, Enter를 누르고 있는 동안 채움이 자랍니다.
일찍 떼면 채움이 되감기고, 되감기는 도중 다시 누르면 현재 채움에서 이어갑니다.
누르는 동안 버튼이 살짝 들어가고, 확정되면 한 번 튀어 오릅니다.

이럴 때 쓰세요

프로젝트 삭제.
길게 눌러 결제.
설정 초기화.

Props

Prop	타입	기본값	설명
`children`	`ReactNode`		버튼 라벨.
`onConfirm`	`() => void`		누르기가 끝까지 채워지면 한 번 실행됩니다.
`duration`	`number`	`1200`	눌러야 하는 밀리초.
`disabled`	`boolean`	`false`	버튼을 끕니다.
`fillClassName`	`string`		자라는 채움의 클래스. 인라인 스타일은 `fillStyle`.

그 밖의 props는 그려지는 요소로 전달되므로 className, style, 이벤트 핸들러를 평소처럼 쓸 수 있습니다.

웹과 React Native

채움은 fillClassName이나 fillStyle로 꾸미고, 그 밖의 props는 button으로 갑니다.

React Native에서는 보조 기술로 길게 누르기 어려우므로 접근성 실행 동작이 바로 확정합니다.

이 컴포넌트를 쓰는 예제

결제 요약장바구니가 바뀌면 수량·줄 합계·총액이 구르고, 쿠폰 안내가 들어오고 나가며, 결제는 의도적으로 길게 눌러야 합니다.MotionListMotionNumberMotionPresenceMotionHold