Add example for triggering actions on swipe about use-gesture

[monstersintokyo]

Hey @sampl,

you can use the provided callbacks for that. I modified the example:
https://codesandbox.io/embed/w0x1030lwk

Don't forget to return the props in every callback. They are used in the event hooks of react-with-gesture.

Cheers.

[sampl]

@monstersintokyo just what I needed--thank you so much!

[monstersintokyo]

@sampl you're welcome :-)

[tim-soft]

@drcmda how would this example work now that we only have the onAction callback?

Including onAction means we can update component state based on events but the children of <Gesture /> don't re-render.

Doing it like this isn't gonna work well

updateState = () => this.setState({ ... });

<Gesture>
  {({ ... }) => {
      // Calling this.setState() from render() is bad...
      if (some gesture condition is met) this.updateState();

      return (
        <Spring>
            {...}
        </Spring>
      );
    }
  }
</Gesture>

[drcmda]

@tim-soft did something change? how did you do it before? i think otherwise in the class base api that needs to be componentDidUpdate that does the updateState().

[tim-soft]

In an older version, we could call setState() based on some gesture event like in https://codesandbox.io/embed/w0x1030lwk without interfering in the animation

updateState = (props) => {
  if (some gesture condition is met) this.setState({ ... });

  return props;
}

<Gesture onMove={this.updateState}>
  {({ ... }) => (
      <Spring>
          {...}
      </Spring>
    );
  }
</Gesture>

Using the onAction prop causes the spring to not animate

[drcmda]

the last bit i don't understand yet. if you're in onAction and you cause a setState, why wouldn't the spring animate? It's been a while but i think i've had trouble figuring out what to do with the renderprops api as it didn't lend itself to this sort of stuff, but using local state as a model for the animation should always work.

[tim-soft]

Here's a codepen where I try to replicate https://codesandbox.io/embed/3vv25z07j6

The top slider uses onAction to decide when to call setState()
The bottom slider tries to call setState() inside the render function --> obviously a noop

You'll notice the top slider set the state, but doesn't move when you drag it around

[drcmda]

I see. Could i interest you in adding these events back via PR?

now: https://github.com/react-spring/react-with-gesture/blob/master/index.js

then: https://github.com/react-spring/react-with-gesture/blob/5f243e0b1da7cf7e2c7ba5dc41f440993e8acca2/src/index.js

[tim-soft]

definitely 👍

[arpitprod]

codesandbox demo code not working. showing this error

ModuleNotFoundError Could not find module in path: '@babel/runtime/helpers/builtin/es6/objectSpread' relative to '/node_modules/react-spring/dist/react-spring.es.js'

How to solve ?

[dbismut]

@arpitprod This is an old issue. Swipe is documented in the documentation.