# Context menu

## Simple usage

```js
const ref = React.useRef();
const ref2 = React.useRef();
const items = React.useMemo(
  () =>
    ipsum.list(5, (i) =>
      i === 2
        ? 'divider'
        : {
            label: ipsum.name(),
            items: ipsum.list(5, (j) => ({
              label: ipsum.name(),
              onClick: () => console.log(`Item ${i}-${j} click`),
            })),
          },
    ),
  [],
);
<SilkeBox column gap>
  <SilkeBox ref={ref} pad="xxl" bg="neutral-20" align="center">
    <h4>Right click to get context menu</h4>
    <SilkeContextMenu target={ref} items={items} />
  </SilkeBox>
  <SilkeBox ref={ref2} pad="xxl" bg="neutral-20" align="center">
    <h4>Click to get context menu</h4>
    <SilkeContextMenu target={ref2} items={() => items} trigger="click" />
  </SilkeBox>
</SilkeBox>;
```

## Anchor context menu to target

```js
const ref = React.useRef();
const items = React.useMemo(
  () =>
    ipsum.list(5, (i) => ({
      label: ipsum.name(),
      items: ipsum.list(5, (j) => ({
        label: ipsum.name(),
        onClick: () => console.log(`Item ${i}-${j} click`),
      })),
    })),
  [],
);
<SilkeBox ref={ref} pad="xxl" bg="neutral-20" align="center">
  <h4>Anchor</h4>
  <SilkeContextMenu
    target={ref}
    anchor={ref}
    targetOrigin="top-right"
    anchorOrigin="bottom-right"
    items={items}
  />
</SilkeBox>;
```

## Manual render contet menu

```js
const [showContext, setShowContext] = React.useState(false);
const [pos, setPos] = React.useState([0, 0]);

<>
  <SilkeButton
    label="Open context menu"
    onClick={(e) => {
      setPos([e.pageX, e.pageY]);
      setShowContext(true);
    }}
  />
  {showContext && (
    <SilkeContextMenu
      anchor={pos}
      onRequestClose={() => setShowContext(false)}
      items={ipsum.list(5, (i) => ({
        label: ipsum.name(),
        items: ipsum.list(5, (j) => ({
          label: ipsum.name(),
          onClick: () => console.log(`Item ${i}-${j} click`),
        })),
      }))}
    />
  )}
</>;
```

## Title and beta tag

```js
const [showContext, setShowContext] = React.useState(false);
const [pos, setPos] = React.useState([0, 0]);

<>
  <SilkeButton
    label="Open context menu"
    onClick={(e) => {
      setPos([e.pageX, e.pageY]);
      setShowContext(true);
    }}
  />
  {showContext && (
    <SilkeContextMenu
      anchor={pos}
      beta
      title="Context menu"
      onRequestClose={() => setShowContext(false)}
      items={ipsum.list(5, (i) => ({
        label: ipsum.name(),
        items: ipsum.list(5, (j) => ({
          label: ipsum.name(),
          onClick: () => console.log(`Item ${i}-${j} click`),
        })),
      }))}
    />
  )}
</>;
```