Interact.js: Integration with React

[andrewgleave]

Just tried to integrate interact with a simple React component and although interact is initialised correctly and is receiving events, nothing is happening. I suspect the issue could be down to React's synthetic events system (http://facebook.github.io/react/docs/events.html) which which may be causing issues for interact.

I've created a Fiddle to illustrate the issue.
http://jsfiddle.net/G79D9/

This is a great library and I'd love to use it so I hope there's an easy fix ;)

[taye]

interact doesn't move elements itself. It only provides event data to listener functions. If you would like to move in response to a drag, you need add event listeners which use the event object's properties to position the target element. For example: http://interactjs.io/#dragging

interact('#drag-me')
    .draggable({
        onmove: function (event) {
            x += event.dx;
            y += event.dy;

            event.target.style.webkitTransform =
            event.target.style.transform =
                'translate(' + x + 'px, ' + y + 'px)';
        },
        ...

[taye]

Here's an update of the fiddle with an event listener that moves the element: http://jsfiddle.net/G79D9/1/

Something similar would have to be done for resize as well.

[andrewgleave]

Ah, sorry. Totally glossed over that in the documentation! Amazingly quick response!

[oisee]

taye, i've found that your fiddle doesn't work at all =(

[jai1331]

It's a great library and would like to implement on this in simple react component ! How do I do that ?

const Comp = (props) => {
       useEffect(() => {
       interact('.divCont')
        .resizable({
          edges: { left: true, right: true },
          modifiers: [
            // keep the edges inside the parent
            interact.modifiers.restrictEdges({
              outer: 'parent'
            }),

            // minimum size
            interact.modifiers.restrictSize({
              min: { width: 100, height: 50 }
            })
          ],

          inertia: true
        })
        .on('resizemove', function (event) {
            //clearTimeout(timerResize);
            var target = event.target;
            var x = (parseFloat(target.getAttribute('data-x')) || 0)
            var y = (parseFloat(target.getAttribute('data-y')) || 0)

            // update the element's style
            target.style.width = event.rect.width + 'px'
            target.style.height = event.rect.height + 'px'

            // translate when resizing from top or left edges
            x += event.deltaRect.left
            y += event.deltaRect.top

            target.style.webkitTransform = target.style.transform =
                'translate(' + x + 'px,' + y + 'px)'

            target.setAttribute('data-x', x)
            target.setAttribute('data-y', y)
            //target.textContent = Math.round(event.rect.width) + '\u00D7' + 
          Math.round(event.rect.height);
        })
        .on('resizeend', function (event) {
            const target = event.target;
            passDataToParent(target.style.width, target.style.height, target.style.transform, x, y, props.field.id) //here i will pass resize width, height to parent to set in state and interact js having the instance of last field only (props.field)
         })
}

Any idea on how to use interact js in react really helpful.

[ubershmekel]

I've made a fiddle that does work:

http://jsfiddle.net/ubershmekel/sh7fqt0w/1/