본문으로 건너뛰기

ContextMenu

원하는 위치에 특정 엘레먼트를 렌더링할 수 있게 해주는 hook 입니다. 다른 컴포넌트와 다르게 사용 편의상 hook 으로 개발되었습니다.

Autocomplete 이나 Dropdown 도 내부적으로는 useContextMenu 를 사용하고 있습니다.

export function ContextMenuBasic(){

  const { contextElement, show } = useContextMenu(
  <div style={{border:'1px solid gray', background:'#efefef', padding:'10px 15px'}}>
    <div>뒤로</div>
    <div>앞으로</div>
    <div>새로고침</div>
  </div>)

  return <Frame>
    {contextElement} {/* useContextMenu 를 통해 얻은 element 를 삽입 */}
    <Flex flexHeight="300px" flexAlign="center" 
    style={{border:'1px solid gray'}}
    onContextMenu={(e)=>{
      e.preventDefault();
      show(`${e.clientX}px`, `${e.clientY}px`);
    }}>
      여기서 우클릭하면 ContextMenu 가 뜹니다.
    </Flex>
  </Frame>
}

렌더링 구조​

ContextMenu 는 일반적인 컴포넌트와는 다르게 react-dom 의 createPortal 을 통해 body 하위의 일정 위치에 렌더링 됩니다.

여러개의 ContextMenu가 생성되어도 같은 컨테이너 하위에 모이게 됩니다.

이렇게 되면 별도의 Context API 를 사용하지 않아도 현재 document 의 모든 ContextMenu 의 제어가 가능해집니다. 특정 Context API 스펙 없이 구현하는것을 목표로 한 결과입니다.

hook 파라미터​

element​

element = ReactNode

컨텍스트메뉴 위치에 렌더링될 엘레먼트입니다.

(optional) zIndex​

zIndex = number

ContextMenu 가 모이는 컨테이너 내에서의 zIndex 를 설정합니다. ContextMenu 간의 깊이를 조정해야 할 때 쓸 수 있습니다.

(optional) independant​

independant = boolean

이 값이 true 이면 이 ContextMenu 가 보여질때(show 처리) 기본 ContextMenu 의 전부 닫힘 처리를 하지 않습니다.

보통은 자신이 보여질때 모든 ContextMenu 를 닫은 후 자신이 보여지는 처리를 합니다.

hook 리턴 설명​

contextElement​

contextElement = React.ReactPortal

입력받은 element 를 ContextMenu 컨테이너에 createPortal 한 결과입니다. 이 값을 렌더링에 사용할 수 있습니다.

export function ContextMenuBasic(){

  const { contextElement, show } = useContextMenu(
  <div style={{border:'1px solid gray', background:'#efefef', padding:'10px 15px'}}>
    <div>뒤로</div>
    <div>앞으로</div>
    <div>새로고침</div>
  </div>)

  ...

  return <Frame>
    {contextElement} {/* useContextMenu 를 통해 얻은 element 를 삽입 */}
    ...
  </Frame>
}

show​

show = (left: string, top: string, noAutoRepositioning?: boolean, marginLeft?: number, margintTop?: number) => void

show(`300px`, `100px`);
show(`calc(50% - 50px)`, `calc(50% - 50px)`);

ContextMenu 를 원하는 위치에 보여지게 합니다. 이미 보여지고 있던 다른 ContextMenu 는 전부 닫힙니다.

파라미터 설명은 다음과 같습니다.

파라미터타입설명
leftstring화면상의 left 좌표입니다. 예) 300px
topstring화면상의 top 좌표입니다. 예) 100px
noAutoRepositioning(optional) boolean기본적으로 ContextMenu 는 표시했을때 컨텐츠가 잘리는지 여부를 계산해서 잘리는 경우 그 축을 기준으로 자동 반전 시킵니다. 이 속성을 false 로 주면 이 처리를 하지 않습니다.
marginLeft(optional) numberleft의 위치에서 주어진 값 만큼 더 보정을 할 수 있습니다.
margintTop(optional) numbertop의 위치에서 주어진 값 만큼 더 보정을 할 수 있습니다.

hide​

hide = () => void

해당 ContextMenu 를 숨깁니다.

getShowState​

getShowState = () => boolean

현재 ContextMenu 가 보여지는 상태인지를 리턴합니다. show / hide 상태를 체크할 필요가 있을때 사용할 수 있습니다.