Comments (12)
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.
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.
Related Issues (20)
- Performance comparison with react-pixi? HOT 1
- TypeError: Cannot read properties of null (reading 'stencil') at ContextSystem.push../node_modules/@pixi/core/dist/esm/core.js.ContextSystem.validateContext (core.js:5206) HOT 4
- NPM installation of library react-pixi-fiber@[email protected] throws error HOT 4
- 1.0.0-beta.13 missing index.es.js HOT 12
- Error: Vite(esbuild) unable to find matching export in PIXI.js HOT 14
- Attempting to compile an app with PixiJS 5.3.11 or 6.2.2 and the latest beta 15 result in an error. HOT 1
- Is this project dead? HOT 2
- Webpack complains about missing exports in pixi.js HOT 3
- Could not resolve dependency: peer react@"^17.0.2" from [email protected] HOT 3
- Stage is not compatible with the React's StrictMode HOT 5
- Pointer Events don't fire at all HOT 2
- Upgrade reconciler
- Text components style property is not correctly typed HOT 2
- Issue on running demo HOT 1
- rightupoutside event may not be supported? HOT 2
- Can't use with new versions of PixiJS HOT 6
- export 'extras' (imported as 'PIXI') was not found in 'pixi.js' HOT 3
- Explicit "createStageClass" usage causes crash HOT 1
- Breaking changes in React experimental branch
- TypeError dispatcher.useSyncExternalStore is not a function 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 react-pixi-fiber.