React：根据屏幕位置更改元素类

Question

I have a React component. Which renders a row of images. On mouse over a bigger preview if the picture is displayed on the left hand side of the picture. However now I would like to put the preview on the right hand side if the original picture is on the left part of the window. My current implemention is very slow.

import React from 'react';
import { calculateDimensions, calculateTimeDifference, postData } from '../Tools';
import { CONST } from '../config';

export class Picture extends React.Component {

    constructor(props) {
    super(props);
    this.state = {
      bookmark: this.props.picture.bookmark,
      stars: parseInt(this.props.picture.stars),
      showPreview: false,
    };

    this.url = CONST.URL_RESTSERVICE + '/picture/update.php';
  }

  componentDidMount() {
    this.setPictureClass();
  }

  componentDidUpdate() {
    this.setPictureClass();
  }

  setPictureClass() {
    // set class to all pictues so they wil get alignet properly
    let pic = document.getElementById('pic' + this.props.picture.id);
      const offsetLeft = pic.getBoundingClientRect().left;
      const width  = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      pic.classList.remove("tooltipPicRight");
      pic.classList.remove("tooltipPicLeft");
      if (width / 2 < offsetLeft ) {
        pic.classList.add("tooltipPicRight");
      } else {
        pic.classList.add("tooltipPicLeft");
      }
  }

  render() {
    const pic = this.props.picture;
    const stars = parseInt(this.state.stars);
    calculateDimensions(pic);
    let timeDiffernce = null;
    if (pic.date && pic.previousDate) {
      timeDiffernce = calculateTimeDifference(pic.date, pic.previousDate);
    }

    // const inputRef = useRef();

    return (
    <div className="inline-block align-center picture">
      <div className="block tooltipPic" id={'pic' + pic.id}>
        {
        this.props.handleClickPicturePreview ?
        <img onClick={() => this.props.handleClickPicturePreview(pic)} src={pic.picLocation} width={pic.width ? calculateDimensions(pic).width : 0} height={pic.height ? calculateDimensions(pic).height : 0} loading="lazy" alt={pic.id} />
        : <a href={pic.picLocation} target="_blank" rel="noopener noreferrer"><img src={pic.picLocation} width={pic.width ? calculateDimensions(pic).width : 0} height={pic.height ? calculateDimensions(pic).height : 0} loading="lazy" alt={pic.id} className=""/></a>
        }
        <span className="tooltiptextPic"><img src={pic.picLocation} width={pic.width ? calculateDimensions(pic, 600, 600).width : 0} height={pic.height ? calculateDimensions(pic, 600, 600).height : 0} loading="lazy" alt={pic.id} /></span>
      </div>
    </div>);
  }
}

Answer 1

you can use element.getBoundingClientRect() which will let you know where in the screes is the image (or element) is appearing, so you can set an if, if it's too close of the left edge, then send it to the other side: https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/

What I would do is to create a css class that pushes the image where I want it to appear,

   .push-image{
    // Some style
    margin-left: 99px; //Whathever you need
    }

Then calculate the position where the image will be rendered

componentDidMount(){
// Find the element already rendered
const divToCheck =  document.getElementById({'pic' + pic.id});

// Get the position
let bounding = divToCheck.getBoundingClientRect();

// Log the results
console.log(bounding);
// {
//  height: 118,
//  width: 591.359375,
//  top: 137,
//  bottom: 255,
//  left: 40.3125,
//  right: 631.671875
// }

// set state so the render has access
this.setState({
boundingPositionX: bounding.left,
})

}

Finally dinamically set the class

render(){
let classToPush;
this.state.boundingPositionX < 99 ? classToPush = "push-image" : classToPush = "";
}

If everything goes right, you should be able to push the element to the right