Replies: 2 comments 2 replies
-
|
I've checked the CodeSandbox, and I noticed an issue immediately: This is better if it's moved in the App.tsx file or something like that, these plugins must be loaded only once per application. The rest seems fine, maybe this issue could have unexpected behavior since every plugin could reload the instance. |
Beta Was this translation helpful? Give feedback.
-
|
Yep, making sure to only load the engine once is the key. Thank you @matteobruni for your insight and for this really cool library. I'm looking forward to applying it to more use cases! For anyone else that found their way here, this is how I handled it. You can also visit the CodeSandbox link I posted above. const nextConfig = {
reactStrictMode: false,
// other configs...
};I created a This approach allows the engine to load in the background. If there's a The new challenge I have is figuring out how to display a play or pause button depending on an |
Beta Was this translation helpful? Give feedback.
-
|
Did you figure out the re-rendering issue? I've been trying to use this library for days now and it's not really useable within a react app if you cannot re-render the / re-use the container and call the container functions programatically. I've tried a tonne of different ways, and havn't figured out a way to reliably re-use a container if the components get re-rendered. |
Beta Was this translation helpful? Give feedback.
-
|
I did end up solving my particular re-rendering issue shortly after posting my answer/reply, and the code is there in the codesandbox link within the The way I solved it was by wrapping the // This component has been shortened for this comment. Check the codesandbox link for the full file.
export default function TunnelParticles() {
// states and stuff...
const memoizedParticles = useMemo(() => {
return (
<Particles
id="tsparticles-fireworks" // ← non-critical typo from copy-pasting, "tsparticles-tunnel" would've been more fitting.
particlesLoaded={particlesLoaded}
options={tunnelParticles}
className="col-start-1 row-start-1 max-h-[calc(100vh-70px)]"
/>
);
// eslint-disable-next-line
}, []);
// handlers stuff...
if (isInitialized) {
return (
<div>
{memoizedParticles}
</div>
)
}
return ( /* ... */ );
}Unfortunately this isn't fresh on my mind anymore, so I'm not sure of the other methods I tried using to make this work. Memoization issues are sometimes solved without React 19 is just around the corner, and they say that the new compiler will make the manual usage of |
Beta Was this translation helpful? Give feedback.
-
Hello, I'm wondering if there's a way to control the particles animation state in a react environment. I'm using
tsparticles v3.3.0and@tsparticles/react v3.0.0. I have two buttons that each have anonClickhandler that is responsible or either playing or pausing the particles animation.I want to achieve the same play/pause button functionality that the particles.js.org config editor achieves. My buttons work sometimes, but the results are very inconsistent. More often than not, the handlers are either ignored or produce weird side-effects.
I've tried looking for solutions all over the
tsparticlesumbrella. The closest solution I found was Issue #4697. The problem with this (and other related) solutions is that they are either out of date or aren't using an official framework component (such as Issue #5231). Thev3.0.0components don't have access to the same props, such as theparticlesInitprop, though I'm not sure how much this really matters.I have created a CodeSandbox example that goes into more detail. See the README and the content on the rendered home page. This isn't really a minimal sandbox, but it emulates my exact environment. The only file that matters is the
<HexagonParticles />component found in'./components/HexagonParticles.tsx'. It is setup nearly exactly as the example react app located in this package.I'm not sure if other frameworks have a hard time with this functionality. It could be a react thing due to how re-rendering works, and that I simply lack the knowledge on how to overcome this.
Any help or insight is much appreciated.
Beta Was this translation helpful? Give feedback.
All reactions