React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by pafke

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
      });
  }
  render() {
      let counter = 0;
      const returnCustomProp = function(that) {
          counter++;
          let x = 0;
          if(that.state.customProperties[counter-1]) {
              x = that.state.customProperties[counter-1].x;
          }
          let y = 0;
          if(that.state.customProperties[counter-1]) {
              y = that.state.customProperties[counter-1].y;
          }
          return "customProperty("+x+" "+y+")";
        }
    return( 
        <div...