{
    key: 'A',
    isCaps: true,
    isWithCtrl: true,
    isWithShift: true
}

import React from 'react';
import useKey from 'use-key-capture';
import './styles.css';

const displayKeys = ['Q', 'W', 'E', 'R', 'T', 'Y', 'Backspace'];

const TargetEventComponent = () => {
  /* 
    keyData - gives the data of pressed key, i.e) isCaps, isNumber, isWithShift. 
    getTargetProps - a prop getter to be given if a target (input, textarea) have 
    to be listened for key-press.
    */
  const { keyData, getTargetProps } = useKey();

  const getIsActive = key => (keyData.key === key ? 'active' : '');

  return (
    <div className="container-target">
      <div className="message">
        Type QWERTY in the input element below. If the focus is outside the
        target, we won't see any change.
      </div>
      <input {...getTargetProps()} />
      <div className="container">
        {displayKeys.map(key => {
          return (
            <div key={key} className={`box ${getIsActive(key)}`}>
              {key}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default TargetEventComponent;