Mouse Movement Tracker

 index.tsx

import React from "react";

import ReactDOM from "react-dom";

import MouseMovementTracker from "./MouseMovementTracker";

import Butterfly from "./Butterfly";

let container = document.getElementById("root");

ReactDOM.render(

<div>

     

   <MouseMovementTracker

    myrender={(data:any)=>{

        return<Butterfly x={data.x} y={data.y}/>

   }}></MouseMovementTracker>

 

    </div>, container);

MouseMovementTracker.tsx

import React from "react";

interface MyInt{

    myrender:any;

}

export default class MouseMovementTracker extends React.Component<MyInt>{

    state={x:0,y:0};

    

    onMouseMoveHandler=(e:any)=>{

        this.setState({x:e.clientX,y:e.clientY})

    };

    render(){

        return(

            <div

                style={{height:"100vh",widows:100}}

                onMouseMove={this.onMouseMoveHandler}

            >

               {

                   this.props.myrender(this.state)

               } 

            </div>

        )

    }

   

}

Butterfly.tsx

import React from "react";

interface Inet{

    x:number,

    y:number

}

export default class Butterfly extends React.Component<Inet>{

    

    render(){

        return(

            <img

            alt="buterfly"

            style={{position:"absolute",

                    left:this.props.x,

                    top:this.props.y,

                    height:"40px",

                    width:"40px"

                }}

src="https://images.unsplash.com/

photo-1560263816-d704d83cce0f?ixlib=rb-1.2.1&

ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60"

            />

        )

    }

}