@fluent-windows/hooks/es/useFocus/useFocus.js

Fluent-Windows React hooks.

/**
 * Subscribe to focus events based on `onFocus`, `onBlur`
 *
 * Demo
 * import { useFocus } from '@fluent-windows/hooks'
 *
 * function handleChange() {
 *   // ...
 * }
 * const [status, bind] = useFocus(handleChange)
 *
 * <button {...bind}>{status}</button>
 */
import * as React from 'react';

function useFocus(statusHandler) {
  const [isFocused, setFocused] = React.useState(false);
  const bind = {
    onFocus: () => {
      statusHandler ? statusHandler(true) : setFocused(true);
    },
    onBlur: () => {
      statusHandler ? statusHandler(false) : setFocused(false);
    }
  };
  return [isFocused, bind];
}

export default useFocus;