Git Product home page Git Product logo

Comments (8)

inlet avatar inlet commented on May 23, 2024 1

👍 The unmount prop is added in PR #16.

from pixi-react.

inlet avatar inlet commented on May 23, 2024

Do you have an use case for this?

Right now the business logic for Stage is cleaned up on unmount.

from pixi-react.

scottkunkel avatar scottkunkel commented on May 23, 2024

Sure, I am doing

export class App extends React.Component<AppProps>{

  stageMount(app: any, container: HTMLElement){
    const width =  Number(window.getComputedStyle(container).width.replace("px",""));
    const height = Number(window.getComputedStyle(container).height.replace("px",""));
    const scale = width / APP_DEFAULT.canvasWidth < height / APP_DEFAULT.canvasHeight ?
      width / APP_DEFAULT.canvasWidth : height / APP_DEFAULT.canvasHeight;
      app.renderer.resize(APP_DEFAULT.canvasWidth * scale, APP_DEFAULT.canvasHeight * scale);
      app.stage.scale.set(scale, scale);
  }

  createObserver(app: any, container: HTMLElement){
    app.ResizeObserver = new ResizeObserver((entries, observer) => {
      for (const entry of entries) {
          this.stageMount(app, entry.target as HTMLElement);
      }
    });
    app.ResizeObserver.observe(container);
  }

  render(){
    return (
      <Stage 
        height={1080} 
        width={1920} 
        options={{
          backgroundColor: 0x10bb99,
          antialias: true
        }}
        onMount={ app  => {
          this.stageMount(app, this.props.container);
          this.createObserver(app, this.props.container);
        }}
      >
        <Text text="Hello World" x={200} y={200} /> 
      </Stage>
    )
  }
  
}

I'd like to unobserve in the unmount.

from pixi-react.

inlet avatar inlet commented on May 23, 2024

Sure we could add a onUnmount prop, but why not add those React life cycles to your class instead?

from pixi-react.

scottkunkel avatar scottkunkel commented on May 23, 2024

yes, that's a solution.

Thanks

from pixi-react.

inlet avatar inlet commented on May 23, 2024

Having an unmount isn’t a bad idea, if you’re up to it you can create a PR with test ;)

from pixi-react.

inlet avatar inlet commented on May 23, 2024

I'll close this issue, if you'd like the unmount in Stage please create a PR with some tests 🤘

from pixi-react.

scottkunkel avatar scottkunkel commented on May 23, 2024

Go ahead and close. I won't be using React after all.
Thank you

from pixi-react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.