useEyeDropper

import { useEyeDropper } from '@usegrand/react-hokss';

function ColorPicker() {
  const { isSupported, isOpen, color, error, open } = useEyeDropper();

  const handlePickColor = async () => {
    if (isSupported) {
      await open();
    }
  };

  return (
    <div>
      <button 
        onClick={handlePickColor} 
        disabled={!isSupported || isOpen}
      >
        {isOpen ? 'Picking...' : 'Pick Color'}
      </button>
      
      {!isSupported && (
        <p>EyeDropper API not supported in this browser</p>
      )}
      
      {color && (
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div 
            style={{ 
              width: '50px', 
              height: '50px', 
              backgroundColor: color,
              border: '1px solid #ccc'
            }} 
          />
          <span>Selected: {color}</span>
        </div>
      )}
      
      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
    </div>
  );
}