import React, { useState } from 'react'; import GlitchSquiggly from 'react-glitch-effect/core/GlitchSquiggly'; const MyComponent = () => { const [isDisabled, setDisabled] = useState(false); const handleToggleGlitch = () => { setDisabled(!isDisabled); }; return ( <div> <button onClick={handleToggleGlitch}>TOGGLE EFFECT</button> <GlitchSquiggly disabled={isDisabled}> <h1>GlitchSquiggly</h1> </GlitchSquiggly> </div> ) };

import React from 'react'; import GlitchClip from 'react-glitch-effect/core/GlitchClip'; const MyComponent = () => { return ( <GlitchClip> <h1>Glitch</h1> </GlitchClip> ) }

import React, {useState} from 'react'; import GlitchClip from 'react-glitch-effect/core/Clip'; const MyComponent = () => { const [isDisabled, setDisabled] = useState(false); const handleToggleGlitch = () => { setDisabled(!isDisabled); }; return ( <div> <button onClick={handleToggleGlitch}>TOGGLE EFFECT</button> <GlitchClip disabled={isDisabled}> <h1>Glitch</h1> </GlitchClip> </div> ) };

import React from 'react'; import GlitchClip from 'react-glitch-effect/core/Clip'; const MyComponent = () => { return ( <GlitchClip onHover={true}> <h1>Glitch</h1> </GlitchClip> ) }

import React, {useState} from 'react'; import GlitchText from 'react-glitch-effect/core/GlitchText'; const MyComponent = () => { const [isDisabled, setDisabled] = useState(false); const handleToggleGlitch = () => { setDisabled(!isDisabled); }; return ( <div> <button onClick={handleToggleGlitch}>TOGGLE EFFECT</button> <GlitchText component='h1' disabled={isDisabled}> Glitch </GlitchText> </div> ) };