Disabling Hotkeys

import { useHotkeys } from 'react-hotkeys-hook'
import { useState } from 'react'

function EditableContent() {
  const [isEditing, setIsEditing] = useState(false)
  
  // Only active when NOT editing
  useHotkeys('e', () => setIsEditing(true), {
    enabled: !isEditing,
  })
  
  // Only active when editing
  useHotkeys('escape', () => setIsEditing(false), {
    enabled: isEditing,
  })
  
  return (
    <div>
      {isEditing ? (
        <input autoFocus onBlur={() => setIsEditing(false)} />
      ) : (
        <p>Press 'e' to edit</p>
      )}
    </div>
  )
}

import { useHotkeys } from 'react-hotkeys-hook'
import { useState } from 'react'

function Document() {
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
  const [isOnline, setIsOnline] = useState(true)
  
  // Only enable save when there are changes AND online
  useHotkeys('ctrl+s', handleSave, {
    enabled: hasUnsavedChanges && isOnline,
    preventDefault: true,
  })
  
  return <div>Content</div>
}

import { useHotkeys } from 'react-hotkeys-hook'

function AdvancedEditor() {
  useHotkeys('ctrl+b', handleBold, {
    enabled: (keyboardEvent, hotkeysEvent) => {
      // Check if we're in a text input
      const target = keyboardEvent.target as HTMLElement
      const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA'
      
      // Only enable if in an input AND user has permission
      return isInput && hasEditPermission()
    },
  })
}

import { useHotkeys } from 'react-hotkeys-hook'

function ConditionalHotkeys() {
  useHotkeys('ctrl+delete', handleDelete, {
    enabled: (keyboardEvent) => {
      // Don't allow delete if readonly mode
      if (isReadOnly) return false
      
      // Don't allow delete if nothing is selected
      if (!hasSelection()) return false
      
      // Require confirmation for destructive action
      return window.confirm('Delete selected items?')
    },
    preventDefault: true,
  })
}

import { useHotkeys } from 'react-hotkeys-hook'
import { useAuth } from './auth'

function AdminPanel() {
  const { user } = useAuth()
  
  // Admin-only hotkey
  useHotkeys('ctrl+shift+a', openAdminPanel, {
    enabled: user?.role === 'admin',
  })
  
  // Pro user features
  useHotkeys('ctrl+shift+p', openProFeatures, {
    enabled: user?.plan === 'pro',
  })
}

import { useHotkeys } from 'react-hotkeys-hook'
import { useFeatureFlag } from './features'

function BetaFeatures() {
  const aiAssistEnabled = useFeatureFlag('ai-assist')
  
  useHotkeys('ctrl+space', openAIAssist, {
    enabled: aiAssistEnabled,
    description: 'Open AI assistant',
  })
}

import { useHotkeys } from 'react-hotkeys-hook'
import { useState } from 'react'

function DataTable() {
  const [isLoading, setIsLoading] = useState(false)
  
  // Disable navigation while loading
  useHotkeys('j', moveDown, { enabled: !isLoading })
  useHotkeys('k', moveUp, { enabled: !isLoading })
  useHotkeys('r', refresh, { enabled: !isLoading })
  
  return <div>Table content</div>
}

import { useHotkeys } from 'react-hotkeys-hook'
import { useState } from 'react'

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false)
  
  // Disable global shortcuts when modal is open
  useHotkeys('ctrl+k', openCommandPalette, {
    enabled: !isModalOpen,
  })
  
  // Modal-specific shortcuts
  useHotkeys('escape', () => setIsModalOpen(false), {
    enabled: isModalOpen,
  })
  
  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      {isModalOpen && <Modal />}
    </div>
  )
}

import { useHotkeys } from 'react-hotkeys-hook'
import { useState } from 'react'

function Editor() {
  const [mode, setMode] = useState<'view' | 'edit'>('view')
  const [hasChanges, setHasChanges] = useState(false)
  
  useHotkeys(
    'ctrl+s',
    handleSave,
    {
      enabled: mode === 'edit' && hasChanges,
      preventDefault: true,
    },
    [mode, hasChanges] // Include state in dependencies
  )
}

import { useHotkeys } from 'react-hotkeys-hook'
import { useState } from 'react'

function useGlobalHotkeyToggle() {
  const [hotkeysEnabled, setHotkeysEnabled] = useState(true)
  
  return { hotkeysEnabled, setHotkeysEnabled }
}

function App() {
  const { hotkeysEnabled, setHotkeysEnabled } = useGlobalHotkeyToggle()
  
  // All hotkeys respect the global toggle
  useHotkeys('ctrl+s', handleSave, { enabled: hotkeysEnabled })
  useHotkeys('ctrl+k', handleCommand, { enabled: hotkeysEnabled })
  useHotkeys('ctrl+p', handlePrint, { enabled: hotkeysEnabled })
  
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={hotkeysEnabled}
          onChange={(e) => setHotkeysEnabled(e.target.checked)}
        />
        Enable keyboard shortcuts
      </label>
    </div>
  )
}

import { useHotkeys, HotkeysProvider, useHotkeysContext } from 'react-hotkeys-hook'

function App() {
  return (
    <HotkeysProvider initiallyActiveScopes={['view']}>
      <Editor />
    </HotkeysProvider>
  )
}

function Editor() {
  const { enableScope, disableScope } = useHotkeysContext()
  
  // Instead of enabled: isViewMode
  useHotkeys('j', moveDown, { scopes: 'view' })
  useHotkeys('k', moveUp, { scopes: 'view' })
  
  // Instead of enabled: isEditMode
  useHotkeys('ctrl+b', makeBold, { scopes: 'edit' })
  useHotkeys('ctrl+i', makeItalic, { scopes: 'edit' })
  
  const switchToEditMode = () => {
    disableScope('view')
    enableScope('edit')
  }
}