Reactjs Waypoint Import Issues

I am trying to incorporate the jquery waypoints module. I am experiencing ALL of these issues in every attempt to use the module in reactjs.-- in this case I get an each of undefin

Solution 1:

I was able to get this imported by the following. http://jsfiddle.net/Lfhepta3/7/

Import from a lib file.

import waypoint from'./libs/jquery.waypoints.js';

https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js

At the top of the file - I've added the following line

window.jQuery = window.$ = require("jquery");

-- then the usage I've used is this.

var elem = "vision0";
              var$el = $('.'+elem);

              $el.waypoint(function(direction) {
                if (direction == 'down') {
                  $el.addClass("js-"+elem+"-animate");
                } else {
                  $el.removeClass("js-"+elem+"-animate");
                }
              }, {
                offset: '50%'
              });

the div is like this

      <img className="vision0" src={require(`img/${this.props.data.image}`)} width="900" />