Skip to main content
⌘K
Last modified: 24/Jun/2024

useKeyboardFocus

By default, you cannot decide about a focus event, that it happened via keyboard or mouse. This hook use a workaround to do that, so you can apply different styles.

#Usage

import { useKeyboardFocus } from '@kinsta/stratus'

const MyComponent = ({ focusStyle, keyboardFocusStyle }) => {
  const { ref, isInFocus, isInFocusKeyboard } = useKeyboardFocus<HTMLButtonElement>()
  const style = isInFocusKeyboard
    ? keyboardFocusStyle
    : isInFocus
      ? focusStyle
      : {}
  
  return (
    <button ref={ref} style={style}>Focus button</button>
  )
}

#Parameters

#isDisabled
boolean
Whether the element is disabled - Defaults to false
#isReadOnly
boolean
Whether the element is readonly (this way the select method runs instead of focus) - Defaults to false

#Types

  • UseKeyboardFocus

Read more about types here