I have overridden the onClick function of anchor() tag in ReactJs to show loading.

const child: ReactElement = Children.only(children);

const childProps = {};

childProps['onClick'] = (event) => {

    if (childProps.href && child.props.target !== '_blank') {
        props.showSpinner(true);
    }

    let onClick = child.props.onClick;
    onClick && onClick();
};

return React.cloneElement(child, childProps);

But the problem is that if the user clicks on anchor(<a>) with shift and mand keypress, then the user switches to the new tab but loading started showing.

So I added the following condition to show loading.

if (!event.shiftKey && childProps.href && child.props.target !== '_blank') {
   props.showSpinner(true);
}

This code handled the Shift key press but I have to handle mand keypress also. I searched through many posts, they showing solution for alt, shift, and ctl keypress but not mand keypress.

I have overridden the onClick function of anchor() tag in ReactJs to show loading.

const child: ReactElement = Children.only(children);

const childProps = {};

childProps['onClick'] = (event) => {

    if (childProps.href && child.props.target !== '_blank') {
        props.showSpinner(true);
    }

    let onClick = child.props.onClick;
    onClick && onClick();
};

return React.cloneElement(child, childProps);

But the problem is that if the user clicks on anchor(<a>) with shift and mand keypress, then the user switches to the new tab but loading started showing.

So I added the following condition to show loading.

if (!event.shiftKey && childProps.href && child.props.target !== '_blank') {
   props.showSpinner(true);
}

This code handled the Shift key press but I have to handle mand keypress also. I searched through many posts, they showing solution for alt, shift, and ctl keypress but not mand keypress.

• javascript
• reactjs

• This question has already been answered Link Here – Soheb Commented Oct 17, 2019 at 5:52
• @MSoheb Thanks, But I have <a> tag with href and only can override onClick and in this method, event.keyCode is giving undefined. – Ravi Sevta Commented Oct 17, 2019 at 6:02

3 Answers 3

You can check value of event.metaKey inside onClick of a button.

    <button
      onClick={e => {
        console.log("CLICKED", e.metaKey);
      }}
    >
      Press
    </button>

In above example, You will get value of e.metaKey as true if mand is pressed.

As far as I understand when we are working with React, window object is not available directly, have you tried with ponentDidMount function

I wrote a library that uses mouse modifiers to select things similar to how you can on operating systems!

Anyways, there is an example of detecting if the user is on Mac os and handling the meta key in the source code. Check out the pivot reducer.

https://github./ssteuteville/react-selection-hooks