React PowerGlitch

This React library is a wrapper around PowerGlitch. PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to glitch anything on the web, without using a canvas. It weights less than 2kb minified and gzipped.

Install

  1. Install react-powerglitch using a package manager

    npm i --save react-powerglitch
# or
yarn add react-powerglitch

  2. Import the useGlitch hook from react-powerglitch anytime you want to use it.

    import { useGlitch } from 'react-powerglitch'

Glitch

In order to glitch something, call useGlitch() and store its result in a variable.

function App() {
    const glitch = useGlitch();

    return (
        <h1>react-powerglitch <span ref={glitch.ref}>?</span></h1>
    );
}

One limitation, when having the createContainers option set to true (which is the default), to not place the glitched element as the direct child of a component or a conditional rendering block. E.g. this will not work:

<>
    {/* Will not work */}
    {condition &&
        <span ref={glitch.ref}>?</span>
    }
</>

Instead, wrap the glitched element with a container:

<>
    {/* Will work */}
    {condition &&
        <div>
            <span ref={glitch.ref}>?</span>
        </div>
    }
</>

Customize

You can pass options to customize the glitch effect to useGlitch:

function App() {
    const glitch = useGlitch({ glitchTimeSpan: false });

    return (
        <h1>react-powerglitch <span ref={glitch.ref}>?</span></h1>
    );
}

The options props accept any value defined in the original PowerGlitch library.

Take a look at the playground to visually find out the best glitch options for your element.

Glitch controls

The useGlitch hook returns an object containing:

  • ref: A function ref which you should use on the element you want to glitch, as shown in previous sections.
  • startGlitch: Glitch control functions to start the glitch animation.
  • stopGlitch: Glitch control functions to stop the glitch animation.
  • setOptions: A function to change the glitch options. This will update the glitched element with the new options.

Here is an example:

function App() {
    const glitch = useGlitch({ glitchTimeSpan: false });

    return (
        <>
            <div>
                <h1 ref={glitch.ref}>react-powerglitch ?</h1>
            </div>
            <button onClick={glitch.startGlitch}>
                Start
            </button>
            <button onClick={glitch.stopGlitch}>
                Stop
            </button>
        </>
    );
}

TypeScript

The type GlitchHandle represents the return type of the useGlitch hook.

Your IDE should automatically identify the return type of useGlitch to be GlitchHandle and assign it to any variable you assign useGlitch() to. In case you want to statically use it, import GlitchHandle from react-powerglitch.

import { useGlitch, GlitchHandle } from 'react-powerglitch';

function App() {
    const glitch: GlitchHandle = useGlitch({ glitchTimeSpan: false });

    return (
        <>
            <div>
                <h1 ref={glitch.ref}>react-powerglitch ?</h1>
            </div>
            <button onClick={glitch.startGlitch}>
                Start
            </button>
            <button onClick={glitch.stopGlitch}>
                Stop
            </button>
        </>
    );
}

GitHub

View Github