Port "CustomPixiComponent" functionality from react-pixi about react-pixi-fiber HOT 12 CLOSED

When dealing with custom PIXI types, such as https://github.com/pixijs/pixi-spine or other third-party custom native PIXI components, having the ability to add custom-components and wrap its functionality is something that we've sorely needed.
If you have another way of achieving this we are of course open to suggestions...

from react-pixi-fiber.

#20

from react-pixi-fiber.

Hey @J00nz, can you show me an example of such CustomPixiComponent?

from react-pixi-fiber.

Can you show me an example of how you use it in react-pixi? As far as I know, CustomPIXIComponent doesn't work in react-pixi, here's the issue I opened over a year ago: Izzimach/react-pixi#72.

Aside from that, I am currently using pixi-spine without any need of custom component, you can just do it through regular React component composition, e.g. something like:

class SpineAnimation extends React.Component {
  componentDidMount() {
    // initialize Spine here
    this.spine = new PIXI.spine.Spine(/* pass Spine data here */)

    // add Spine to Container
    this.container.addChild(this.spine)
  }
  
  render() {
    return <ReactPIXI.DisplayObjectContainer ref={c => this.container = c} />
  }
}

Then you can implement any functionality you need by using this.spine reference.

Is your solution with custom component even more simple?

from react-pixi-fiber.

I would say that it works in a similar manner but provides a leaner interface, since it doesn't force the users to add unnecessary wrapper components. Plus it further simplifies the porting of existing react-pixi applications.
Plus I also added some basic resizing and ported the way react-pixi handles pixi point properties.

from react-pixi-fiber.

Does this work if you need a custom Container type with sub-component from react-pixi-fiber ? For example to add https://github.com/davidfig/pixi-viewport ?

from react-pixi-fiber.

@olivoil No, not in its current implementation, it merely functions as a glue between native pixi.js and react-pixi-fiber.

@michalochman rewriting your previous example to CustomPixiComponent:

const SpineAnimation = CustomPixiComponent({
  customDisplayObject(props) {
    return new PIXI.spine.Spine(props.spine.spineData)
  }
}

from react-pixi-fiber.

@J00nz thanks, is this an implementation in react-pixi or the implementation in react-pixi-fiber using #20? Are you actually using customDidAttach and customWillDetach in your custom componets? If you do - please show me a simple example.

I would like to properly plan development of this feature.

from react-pixi-fiber.

@michalochman the example works in both.
We've found it necessary to use at least customWillDetach, since it provides a way to do cleanup of variables etc that might exist to prevent memory leaks. customDidAttach we haven't used much, I just added it to #20 to ensure full compatibility with existing applications.

from react-pixi-fiber.

const SpineAnimation = CustomPixiComponent({
  customDisplayObject(props) {
    window.addEventListener('resize', DoingResizeStuff);
    return new PIXI.spine.Spine(props.spine.spineData)
  }
  customWillDetach() {
    window.removeEventListener('resize', DoingResizeStuff);
  }
}

from react-pixi-fiber.

Hey @J00nz is there a chance we can talk outside github? I've created a gitter room here: https://gitter.im/react-pixi-fiber.

from react-pixi-fiber.

Resolved in #25

from react-pixi-fiber.