[contexify] context-menu 사용법

사용 라이브러리

• https://fkhadra.github.io/react-contexify/

기본적인 사용법

const Contents: FC = () => { const { show } = useContextMenu(); const displayFadeMenuHandler = (event: TriggerEvent) => { show({ id: 'menu_fade', event, }); }; const displayFlipMenuHandler = (event: TriggerEvent) => { show({ id: 'menu_flip', props: true, event, }); }; return ( <> <ListMenuSample /> <FlipMenuSample /> <button className={cx('context-menu-red')} onClick={displayFadeMenuHandler} > FADE CONTEXT MENU </button> <button className={cx('context-menu-blue')} onClick={displayFlipMenuHandler} > FLIP CONTEXT MENU </button> </> ); }; export default Contents;

const { show } = useContextMenu();=> 콘텍스트 메뉴 띄우는 훅

displayFadeMenuHandler=> show 안에 이벤트와 메뉴 아이디를 넣어 호출함, 사용하는곳에 onClick으로 지정

공식 홈페이지 사용 예제

• https://fkhadra.github.io/react-contexify/quick-start

스타일링 하는법

• https://fkhadra.github.io/react-contexify/how-to-style

샘플

localhost:3000/context

왼쪽 메뉴 클릭시 리스트형식 샘플

오른쪽 메뉴 클릭시 백그라운드 샘플

왼쪽 메뉴

PC -

메뉴 띄우는 위치 조정 가능

show() 에 position 객체로 x,y 좌표 삽입

• https://fkhadra.github.io/react-contexify/set-a-custom-position

MOBILE -

해상도 768 이하부터 미디어쿼리로 widht, height 100% 조정하여 화면 꽉차게 스타일 조정 가능

서브메뉴 클릭시 뜨는 위치 조정 가능

styles/_contexify.scss

contexify에서 제공하는 기본 스타일을 사용하고 있기 때문에 module.scss 로 사용이 불가함

contexify에서 제공하는 클래스들을 제외한 기타 custom-element들은 module.scss에서 작업해도 상관없음

스타일 커스터마이징 샘플 scss

라이브러리에서 제공하는 css import 후 커스텀 태그로 한번 감싼 뒤 사용

module css 방식은 자동적으로 해쉬값을 붙이기 때문에 라이브러리 클래스명을 참조할 수 없음

@import "react-contexify/dist/ReactContexify.css"; .custom-contexify-wrapper { height: 500px; background-color: #7fffd4; span { position: relative; width: 5vw; height: 5vw; margin-right: 20px; } @media (max-width: 768px) { width: 100%; height: 100%; } .contexify_item { .contexify_itemContent { height: 100%; border: 1px solid #ff0000; background-color: #7fffd4; } } .contexify_submenu { width: 90%; background-color: #000000; @media (max-width: 768px) { top: 200px; right: 50px; } .contexify_item { width: 80%; background-color: #ff0000; .contexify_itemContent { font-weight: bold; width: 70%; } } } }