disabling mouse events react

Question

I am trying to disable mouse events in react. I tried pointer-events: none and document.body.style.cursor = 'none'. both didn't work. I tried it on whole body or on App. Can't get it to work. I basically wanted to hide mouse pointer for sometime and put it back.

@DacreDenny hide the cursor. basically i don;t want the user to interact with the website for interim. — user3900196, Sep 17 '19 at 03:32
@I'mLimit i tried exactly the same like in the other link you mentioned(in line style). it didn't work. — user3900196, Sep 17 '19 at 03:33
@user3900196 can you include the basics of your code to show what you've attempted - we can better help from there — Dacre Denny, Sep 17 '19 at 03:34
@DacreDenny: i do use MediaRecorder to record the screen for some time.i have a state in react to maintain this when it happens. Then in App.js i use — user3900196, Sep 17 '19 at 03:36
can you include the code for your react component where you're trying to set the cursor styling? — Dacre Denny, Sep 17 '19 at 03:37
ui.screenSharing is just a mobx property(boolean) which is set/unset based on user action. — user3900196, Sep 17 '19 at 03:44

score 2 · Accepted Answer · answered Sep 17 '19 at 03:44

2

Ok you need to wrapper that object

class Hello extends React.Component {
  render() {
    return <div style={{cursor: 'none'}}>
             <button style={{ pointerEvents: 'none'}}>
                Hello {this.props.name}
             </button>
           </div>;
  }
}

ReactDOM.render(
  <Hello name="World"/>,
  document.body
);

By base of CSS can't combine pointerEvents: 'none',cursor: 'none' directly.

You need to wrapper that item and separate style like here

DEMO: https://jsfiddle.net/limitbrk/g9w7es5p/

CSS cant combine How to combine cursor: not-allowed and pointer-events: none;

disable pointer-events Can't disable pointer-events in React app

answered Sep 17 '19 at 03:44

I'm Limit

889
5
18

i am trying to use this property on whole body of the html. for now I am just trying to use it in App.js when rendering. btw i tried to split no luck! – user3900196 Sep 17 '19 at 03:53
Let see the demo first – I'm Limit Sep 17 '19 at 03:56
okay. seems to work. i have to individually get this for parent and child layers to get it to work. thanks! – user3900196 Sep 17 '19 at 21:08

disabling mouse events react

1 Answers1