Do we need to use refs for the new @tsparticles/react libraries?

[justinhessdev]

This question is related to issue #4210

In the old ts-particles I was able to play / pause items by using a ref on the Particles container prop:

export default function App() {
  const containerRef = React.useRef();

  const handlePause = () => {
    containerRef.current.pause();
  };

  const handlePlay = () => {
    containerRef.current.play();
  };

  return (
    <>
      <div
        onClick={handlePause}
      >
        Pause
      </div>
      <div
        onClick={handlePlay}
      >
        Play
      </div>
      <Particles
        container={containerRef}
        options={{ }}

But the new documention for @tsparticles/react says to do something like this:
(and the new Particles component doesn't have a container prop)

export default function App() {
  const handleParticlesLoaded = (container) => {

  };

  const handlePlay = () => {
    // container.play();
  };

  const handlePause = () => {
    // container.pause();
  };

  // this should be run only once per application lifetime
  useEffect(() => {
    initParticlesEngine(async (engine) => {
      await loadBasic(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  if (init) {
    return (
      <div>
        <Particles
          id="tsparticles" // new particles component has no container prop
          particlesLoaded={handleParticlesLoaded}
          options={{...}}
        />

I tried something hacky by saving container as state but it didn't work:

  const [pContainer, setPContainer] = useState(null);
  const handleParticlesLoaded = (container) => {
    if (!pContainer) {
       setPContainer(container);
    }
  };

  const handlePlay = () => {
    pContainer.play();
  };

  const handlePause = () => {
    pContainer.pause();
  };

How do I play / pause?

[matteobruni]

Please open an issue or a discussion in the react repository about that.