(Deleted) How to create spotlight effect in ReactJS?

3 months ago by
I am new to React Js and trying to create a spotlight effect. When the mouse moves over the image, only that region is visible in the spotlight? Using the create-react app for this.

Here is My code. Child is the component which contains the image. Imported that in this file. I could just get the mouse-coordinates. How should I proceed?

enter code here

export class Button extends React.Component {

constructor(props) {
this.handleClick = this.handleClick.bind(this);
this.state = { random: 0 , x: 0, y: 0};


_onMouseMove(e) {
this.setState({ x: e.screenX, y: e.screenY });


render() {
const { x, y } = this.state;
return (
<Child moveIt={this._onMouseMove.bind(this)} />
<div>The number is: {this.state.random}</div>
<div><h1>Mouse coordinates: { x } { y }</h1></div>
Community: FEniCS Project
Please login to add an answer/comment or follow this question.
The thread is closed. No new answer/comment may be added.

Similar posts:
Search »
  • Nothing matches yet.