react-contexify

import styled from "styled-components";
import { Menu, Item, Separator, useContextMenu } from "react-contexify";
import "react-contexify/dist/ReactContexify.css";

const CanvasWrap = styled.div`
  canvas {
    box-shadow: 0 0 5px rgba(158, 158, 158, 0.1);
  }
`;

const StyledMenu = styled(Menu)`
  display: flex;
  flex-direction: column;

  .react-contexify__separator {
  }

  .react-contexify__item {
    margin: 0rem;
    display: block;
    padding: 0.2rem;
  }
`;

function Canvas(canvasState: any) {
  const { show } = useContextMenu({
    id: "context",
  });

  const handleContextMenu = (event: any) => {
    event.preventDefault();
    show(event);
  };

  return (
    <CanvasWrap onContextMenu={handleContextMenu}>
      <canvas id="canvas" />
      <StyledMenu id="context">
        <Item>삭제</Item>
        <Separator />
        <Item>앞으로 보내기</Item>
        <Item>뒤로 보내기</Item>
      </StyledMenu>
    </CanvasWrap>
  );
}

export default Canvas;