react-glitch-effect v3.1.0

React glitch-effect-components

DEMO

Squiggly Glitch Component

import GlitchSquiggly from 'react-glitch-effect/core/GlitchSquiggly';

Props

Example Squiggly glitch effect component

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>
 )
};

Clip Glitch Component

import GlitchClip from 'react-glitch-effect/core/GlitchClip';

Props

Example Clip glitch effect component

import React from 'react';
import GlitchClip from 'react-glitch-effect/core/GlitchClip';

const MyComponent = () => {
   return (
     <GlitchClip>
       <h1>Glitch</h1>
     </GlitchClip>
   )
}

Manually trigger example Clip glitch effect component

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>
  )
};

Example Clip glitch effect with on hover

import React from 'react';
import GlitchClip from 'react-glitch-effect/core/Clip';

const MyComponent = () => {
    return (
      <GlitchClip onHover={true}>
        <h1>Glitch</h1>
      </GlitchClip>
    )
}

Text Glitch Component

import GlitchText from 'react-glitch-effect/core/GlitchText';

Props

Example Text glitch effect component

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>
   )
 };