Glitch Effect Help

[fitzmode]

How can I disable the Glitch effect on user input via a checkbox? Changing the active prop does not work even with a very minimal setup. Is there something I'm missing?

...
const [active, setState] = React.useState(true);

...

<button onClick={() => {
setState(!active)
}}>Toggle</button>

  <Glitch active={active} />

[ezekielaquino]

Indeed toggling active props does not take any effect. Wrapping it e.g. {isActive && <Glitch active />} does work BUT i think this is the wrong approach (also, Safari lags every time it does get toggled on)

[austinmayer]

Here's a working example of toggling active / disabled Glitch. Note the glitch won't visually appear for 1.5s as this is the default min glitch delay.

[glitch, setGlitch] = useState(false);
const toggleGlitch = () => setGlitch(!glitch);

...

<button onClick={toggleGlitch}>
    {glitch ? "Disable Glitch" : "Enable Glitch"}
</button>

...

<Glitch
    delay={[1.5, 3.5]} // min and max glitch delay
    duration={[0.6, 1.0]} // min and max glitch duration
    strength={[0.3, 1.0]} // min and max glitch strength
    active={glitch} // turn on/off the effect (switches between "mode" prop and GlitchMode.DISABLED)
    ratio={0.85} // Threshold for strong glitches, 0 - no weak glitches, 1 - no strong glitches.
/>

https://codesandbox.io/s/react-postprocessing-dof-blob-forked-5otwn?file=/src/App.js