본문으로 건너뛰기
bolerish/edge

사용법

기본적으로 Edge.Provider와 Edge.Surface를 사용하세요. 기존 컴포넌트에 직접 연결할 때는 useSurface를 사용할 수 있습니다.

영역 연결하기

먼저 설치를 마치세요. 서버 컴포넌트를 사용하는 프레임워크에서는 "use client"를 선언한 클라이언트 모듈 안에서 Edge를 사용하세요.

조명을 공유할 영역을 Edge.Provider로 감싸고, 반응할 요소에만 Edge.Surface를 사용하세요. 아래 두 카드는 같은 조명에 반응합니다. Edge.Provider를 중첩하면 독립적인 조명이 만들어집니다.

예제 카드

두 카드가 같은 조명에 반응합니다.

다른 예제 카드

두 카드가 같은 조명에 반응합니다.

기존 스타일과 이벤트 유지하기

as로 렌더링할 HTML 태그를 선택하세요. 해당 요소의 HTML 속성, 이벤트, ref를 그대로 사용할 수 있고, className과 style으로 기존 스타일을 적용할 수 있습니다. Edge.Provider는 DOM 요소를 추가하지 않으며 각 Edge.Surface는 요소 하나를 렌더링합니다.

스타일 조합
<Edge.Surface as="button" type="button" onClick={handleExampleClick}>
  Example button
</Edge.Surface>

input 요소에는 래퍼가 필요합니다. 기존 하이라이트나 가상 요소와 충돌하면 적용 시 고려사항을 참고하세요. 스타일은 스타일, 움직임은 움직임에서 설정할 수 있습니다.

기존 컴포넌트 연결하기

Card나 Button이 자체 HTML 요소를 렌더링하고 있다면 컴포넌트 안에서 useSurface(options)을 호출하고, 반환된 ref를 해당 요소에 연결하세요. 컴포넌트는 Edge.Provider 안에 두면 됩니다. React 18의 함수 컴포넌트는 forwardRef로 ref를 전달해야 합니다.

위치가 바뀌는 경우에는 레이아웃 갱신을 참고하세요.

bolerish/edge · React