React-text-glitch-effect NPM

react-text-glitch-effect

Install

using npm

npm install react-text-glitch-effect

Usage

import React from 'react';
import {TextGlitchEffect} from 'react-text-glitch-effect';

function App() {
  return (
    <TextGlitchEffect
      text='React Text Glitch Effect'
      speed={40}
      letterCase='lowercase'
      includeSpecialChars
    />
  );
}

export default App;

Note

Try to use monospace fonts in case of alphabets or alphanumeric type, as the letters having different width may not look good.

Demo

Click here for demo

Properties

Property	Type	Default	Description
text	String		The text which will have the glitch effect.
speed	Number	`30`	The speed at which the letters change (in ms)
letterCase	`lowercase` or `uppercase`	`uppercase`	The letter case which can be used.
className	String		Text styles.
type	`alphabets`, `numbers`, `specialchars` or `alphanumeric`	`alphabets`	The type can be used to set which letters to show when the effects run.