CODEWITHSUNDEEP
javascriptcssreactjs
nopassport1
nopassport1

Reputation: 1944

Place <div> at x,y coordinate in React

I have a simple component which looks like this:

import React from "react";
import './MyContainer.css';

class MyContainer extends React.Component {
    constructor(props) {

        super(props);

        this.state = {

        };

    }

    showWhereClicked = (e) => {
        console.log(`you have clicked X:${e.screenX} Y:${e.screenY}`);

        // do stuff
    }



    render() {
        return (
            <div className="myContainer" onClick={this.showWhereClicked}>
                I am 500px tall.
            </div>
        );
    }
}

export default MyContainer;

Whenever I click anywhere inside <MyContainer />, I get a console message giving me an X and Y coordinate of where I clicked on screen.

I wish to place a <div> inside at the X and Y location of my mouse click. Ideally a box or something, say 100x100px wide.

Later I wish to implement a way for me to freely move these <div> components around the screen.

How can I achieve this?

Upvotes: 9

Views: 17075

Answers (2)

Twiggeh
Twiggeh

Reputation: 1160

The way I would handle this is by using css in js.

You can set the position of any DOM-Element with position: absolute;, top : yCoordinate and left : xCoordinate css attributes.

// take control over the style of a component
const [style, setStyle] = useState(initialStyle); 

const setCoordinates = (x,y) => {
// You don't need whitespace in here, I added it for readability
// I would recommend using something like EmotionJS for this
    return `position:absolute;   
            left:${x}px;         
            top:${y}px;`
}

...

return(
<div 
 style = {style}
 onClick = { e => { 
     const newStyle = 
           setCoordinates(e.target.screenX,
                          e.target.screenY);
     setStyle(newStyle);
 }}
></div>)

You can then set those in any shape or form and the desired result should be visible. You won't need to redraw anything, because the DOM didn't change, just the css.

Upvotes: 7

egorchik
egorchik

Reputation: 549

   class MyContainer extends React.Component {
    constructor(props) {

        super(props);

        this.state = {
            placedDiv:{
                top:-9999px;
                left:-9999px; // hide div first
                width:100px;
                height:100px;
                position:absolute;
            }
        };

    }

    showWhereClicked = (e) => {
        console.log(`you have clicked X:${e.screenX} Y:${e.screenY}`);
        this.setState({
            placedDiv:{
                top:e.screenY + 'px'
                left:e.screenX + 'px'
            }
        })

        // do stuff
    }



    render() {
        return (
            <div className="myContainer" onClick={this.showWhereClicked}>
                I am 500px tall.
                <div style={this.state.placedDiv}></div>
            </div>
        );
    }
}

export default MyContainer;

.myContainer {
position:relative /// in CSS!!!
}

Upvotes: 2

Related Questions