How to use the actionsack.useKeyboardListener function in actionsack

function KeyboardShortcut({ trigger, handle }) {
  useKeyboardListener(trigger, handle)
  return null
}

function SelectionEditor({ onChange }) {
  const [visible, setVisible] = React.useState(false)
  const [open, setOpen] = React.useState(true)

  useKeyboardListener('Escape', () => setVisible(false))

  const [state, dispatch] = React.useReducer(reducer, {
    bold: false,
    italics: false,
    underline: false,
    color: null
  })

  React.useEffect(() => {
    onChange(state)
  }, [onChange, state])

  return (
    <div style="{{">
      </div>

function ExportMenu({
  backgroundImage,
  onChange,
  exportSize,
  isVisible,
  toggleVisibility,
  exportImage: exp
}) {
  const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
  const online = useOnline()
  const isSafari = useSafari()

  const [exportImage, { loading }] = useAsyncCallback(exp)
  useKeyboardListener('⌘-⇧-e', () => exportImage())

  const disablePNG = isSafari && (tooLarge || !online)

  const input = React.useRef()

  const handleExportSizeChange = selectedSize => () => onChange('exportSize', selectedSize)

  const handleExport = format => () =>
    exportImage(format, {
      filename: input.current.value
    })

  return (
    <div id="export-menu">
      <div>
        </div></div>