Comments (8)
👍 The unmount prop is added in PR #16.
from pixi-react.
Do you have an use case for this?
Right now the business logic for Stage is cleaned up on unmount.
from pixi-react.
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.
Sure we could add a onUnmount
prop, but why not add those React life cycles to your class instead?
from pixi-react.
yes, that's a solution.
Thanks
from pixi-react.
Having an unmount isn’t a bad idea, if you’re up to it you can create a PR with test ;)
from pixi-react.
I'll close this issue, if you'd like the unmount in Stage
please create a PR with some tests 🤘
from pixi-react.
Go ahead and close. I won't be using React after all.
Thank you
from pixi-react.
Related Issues (20)
- Bug: interactive does not exist HOT 2
- Bug: PixiComponent type issue with Container HOT 2
- Bug: Cannot read properties of undefined (reading 'alternate')
- Bug: PixiComponent type issue with Text
- Feature Request: Please include examples about Custom Components using High Order Components
- Bug: React$1.Component is not a constructor HOT 1
- Bug: BitmapText style not changing when `style` prop changes
- Bug: issues with interactivity if you never import pixi.js HOT 1
- Feature Request: Add documentation for event handling
- [Feature Request] Add HTMLText Component
- Bug: Component and child components not being destroyed on unmount by default
- Bug: Peer Dependency of pixi.js breaks any app <7.2 HOT 3
- Bug: `__REACT_PIXI_REQUEST_RENDER__` event is not emitted when expected HOT 1
- Bug: Error message is too long.
- Bug: TypeError: Cannot read properties of null (reading 'stage')
- Bug: unable to see "Hello world" text from readme example? HOT 2
- Bug: ReferenceError: Worker is not defined HOT 5
- Feature Request: PIXI v8 support HOT 6
- Bug: Events don't seem to work at all. HOT 1
- Bug: How to mask sprites with sprites in pixi-react? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixi-react.