React：CTRL + S や Command + S で保存処理を行うには

create-next-app@13.4.19 で初期コードを生成後、実現したいフックを書いてみました。

保存のショートカットキーで、指定した処理を実行するフック

Mac なら Command + S、Mac でなければ CTRL + S で指定した処理を実行します。

"use client"

import { useEffect } from 'react';

export default function useSaveKey(saveFunc: ()=> void) {
  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      const isMac = window.navigator.userAgent.indexOf("Mac") !== -1;
      const isCtrl = isMac ? e.metaKey : e.ctrlKey;
      if (e.key === 's' && isCtrl) {
        e.preventDefault();
        saveFunc();
      }
    }
    document.addEventListener('keydown', onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown)
  }, [saveFunc])
}

使用例

初期で生成された page.tsx に追加してみた。

"use client"

import Image from 'next/image'
import useSaveKey from './useSaveKey';

export default function Home() {
  useSaveKey(() => console.log('save.'));
  return (
(以下略)