Using interactjs modifiers with reactablejs

[Peta5000]

Hi, I'm using reactablejs and really appreciate the easy handling! I've already a working app in place where I can move and rotate some elements on my screen. These elements live in a surrounding DIV. My next step would be to restrict the drag-area to this DIV. In the interact.js documentation I can see that the restrict modifier would do the job. But: I cannot see reactablejs exposing the modifiers feature yet. Am I right - is reactablejs not capable of using modifiers at the moment? Do you have this on your roadmap? Would you appreciate to get a PR for this feature?

[beizhedenglong]

@Peta5000 I haven't implemented modifiers yet. I will be appreciated If you want to send a PR to implement it.

After take a look at document, I think Maybe you can add a modifiers prop and pass the prop to interact in componentDidMount lifecycle. Like this:

class Reactable extends React.Component<HocProps> {
  componentDidMount() { 
   const {modifiers} = this.props
    // do some stuff
   }

}

[Peta5000]

@beizhedenglong ok. you'll get a PR in the next days.

[beizhedenglong]

@Peta5000 You can use modifiers like this example: https://beizhedenglong.github.io/reactablejs/?path=/story/restrict--basic

[Peta5000]

@beizhedenglong Thanks for the tip! And yeah, I'm already doing it like in your example but I don't like the import of 'interactjs' as I would like to have it completely encapsulated in the reactablejs HOC. But I have to import it because otherwise typings won't work correctly. Perhaps I find the time for a PR to enhance reactablejs with modifier support.