React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by jatin_parmar

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

#ParentContainer {
    border: solid red 1px;
    padding: 20px;
}
section {
    display: inline-block;
    border: solid blue 1px;
}

Babel + JSX

class TestComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          customProperties: []
      };
  }
  _testFunction = (e) => {
      var mouseX = e.pageX;
      var mouseY = e.pageY;
      var spans = document.getElementById('ParentContainer').querySelectorAll('section');
      var theRangeSquared = 50 * 50;
      var maxOffset = 5;
      var newCustomProperties = [];
      for (var i = 0; i < spans.length; i++) {
          var position = spans[i].getBoundingClientRect();
          var widthMod = position.width / 2;
          var heightMod = position.height / 2;
          var coordX = position.x + widthMod;
          var coordY = position.y + heightMod + window.scrollY;
          // Distance from mouse
          var dx = coordX - mouseX;
          var dy = coordY - mouseY;
          var distanceSquared = (dx * dx + dy * dy);
          var tx = 0,
              ty = 0;
          if (distanceSquared < theRangeSquared && distanceSquared !== 0) {
              // Calculate shift scale (inverse of distance)
              var shift = maxOffset * (theRangeSquared - distanceSquared) / theRangeSquared;
              var distance = Math.sqrt(distanceSquared);
              tx = shift * dx / distance;
              ty = shift * dy / distance;
          }
          newCustomProperties.push({
              x: tx,
              y: ty
          });
      }
      this.setState({
          customProperties: newCustomProperties
      });
  }
      returnCustomProp = (index)=>{
          let x = 0;
          if(this.state.customProperties[index]) {
              x = this.state.customProperties[index].x;
          }
          let y = 0;
          if(this.state.customProperties[index]) {
              y = this.state.customProperties[index].y;
          }
          return "customProperty("+x+" "+y+")";
        }
 

  render() {
     return( 
        <div onMouseMove={this._testFunction} id="ParentContainer">
            <section...