Anyone out there using Paperjs with React?

[Bojan Hribernik]

At the moment I'm using componentDidMount() and componentDidUpdate() like this

componentDidMount() {

  const { active, fullscreen } = this.props;

  const { container, image, canvas } = this.refs;

  const ClimbuddyCanvas = require('../ClimbuddyCanvas');

  this.canvas = new PaperCanvas({

    container: container,

    image: image,

    canvas: canvas,

    active: active,

    fullscreen: fullscreen

  });

}

componentDidUpdate(prevProps, prevState) {

  const { active, image, route, fullscreen } = this.props;

  if (active !== prevProps.active) {

    this.canvas.setActive(active);

  }

  if (image !== prevProps.image) {

    this.canvas.loadImage(image);

  }

  if (route !== prevProps.route) {

    this.canvas.setRoute(route);

  }

  if (fullscreen !== prevProps.fullscreen) {

    this.canvas.resize();

  }

}

'm thinking about building some sort of bindings like this

<Paper width={600} height={400}>

  <Project>

    <Layer>

      <PathCircle center={[80, 50]} radius={30} strokeColor={'black'} />

    </Layer>

    <Layer>

      <PathCircle center={[180, 150]} radius={40} strokeColor={'red'} />

    </Layer>

  </Project>

  <Tools>

    <Tool name={'pen'} onMouseDown={this.draw} />

    <Tool name={'eraser'} onMouseDown={this.erase} />

  </Tools>

</Paper>

Does this even make sense? I'm not sure about the performance.

Any thoughts?

[Malte Nuhn]

Did you ever get anywhere with this? We're looking at a possible paperjs x reactjs integration (client side only, no isomorphic rendering), if you're still interested / working on this, would love to trade ideas!

[Bojan Hribernik]

Hey

I did some thinking, but never started actively working on this. I did set up an example repo though https://github.com/HriBB/react-paper-bindings, and am still interested in creating paperjs bindings for react. I'm pretty busy these days, but maybe we can exchange ideas or even work together on this. BTW check out react-art https://github.com/reactjs/react-art

--
You received this message because you are subscribed to a topic in the Google Groups "Paper.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/paperjs/_6fTuEnciA0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to paperjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.