wufe / react-particles-js

Particles.js for React
https://rpj.bembi.dev/
MIT License
1.15k stars 106 forks source link

Add the ability to reference particles container from parent #124

Closed crutchcorn closed 4 years ago

crutchcorn commented 4 years ago

In order to comply with WCAG A requirements, I had to add a play/pause button to the particle effect on my website. However, I had no method of accessing the underlying Particles Container instance from this component. This PR adds that functionality and makes use of refs to easily add in a ref.current.pause() and ref.current.play() functionality to unblock my usage:

const Comp = () => {
    const ref = React.useRef()

    const play = () => {
        ref.current.play();
    }

    const pause = () => {
        ref.current.pause();
    }

    return (
      <Particles
              height={"100vh"}
              width={"100vw"}
              className="particlesContainer"
              params={particlesParams}
              forwardRef={ref}
            />
    )
}
wufe commented 4 years ago

Thanks for your contribution. It has now been merged and available in v3.2.1.