React Text Scramble

Lightweight zero dependency React text scrambler.

Use the provided TextScramble component, or build your own component with the useScrambleTest hook.

Installation

npm i @skits/react-text-scramble

Usage

Basic example

import TextScramble from '@skits/react-text-scramble';

export default function App() {
  return (
    <div className="app">
      <TextScramble text="Hello World" />
    </div>
  );
}

Example usage with props

import TextScramble from '@skits/react-text-scramble';

export default function App() {
  return (
    <div className="app">
      <TextScramble
        text="Hello World"
        autostart
        wrappingElement="p" // Wraps the provided text in 'p' tags - <p>{text}</p>
        characters="0123456789" // Scramble text using numbers only
        speed={50}
        delay={100}
        revealText
        revealSpeed={50}
        revealMode="typewriter" // Reveal text from left to right
      />
    </div>
  );
}

Example custom component with useTextScramble hook

import { useTextScramble } from '@skits/react-text-scramble';

export const CustomTextScrambler: React.FC<TextScrambleProps> = ({ text }) => {
  const { state, reveal } = useTextScramble(text, {
    characters: '0123456789',
    speed: 50,
  });

  useEffect(() => {
    reveal(100, 0, 'typewriter');
  }, []);

  return <h1>{state.output}</h1>;
};

<TextScramble />

Props

Flexible component API

| Prop | Type | Description | Default | | ------------------ | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | text* | string | The text string to scramble | | | autostart | boolean | Autostart the text scrambler | true | | wrappingElement | React.FunctionComponent \| React.ComponentClass \| string | Custom wrapper for the provided texte.g 'h1', MyComponent | | | characters | string | The characters used to scramble the provided text | SYMBOLS¹ | | scrambleSpeed | number | The speed used when scrambling the provided text | 30 | | revealText | boolean | Scrambles and reveals the provided text - See reveal settings below to configure | false | | revealSpeed | number | How fast each letter should be revealed | 100 | | revealDelay | number | How long before the text is revealed | 1000 | | revealMode | 'random' \| 'typewriter' | The mode to use when revealing the text When set torandom letters will revealed randomly. When set to typewriter letter will be revealed from left to right | random | | onRevealComplete | function | A callback that is triggered when text reveal is completed - e.g. onRevealComplete={() => console.log('Text revealed!')} | |

* required ¹ const SYMBOLS = 'abcdefghijklmnopqrstuvwxyz!@#$%^&*()_+-={}[]'

useTextScramble

useTextScramble: (
  text: string,
  options?: TextScrambleOptions | undefined
) => {
  state: BaffleState;
  reveal: (revealSpeed: any, delay: any, revealMode: RevealMode) => void;
  start: () => void;
  stop: () => void;
};

TextScrambleOptions

| Option | Type | Description | Default | | ------------ | -------- | ------------------------------------------------- | ---------- | | characters | string | The characters used to scramble the provided text | SYMBOLS¹ | | exclude | string[] | Characters to exclude from the text scrambler | [' '] | | speed | string | The speed used when scrambling the provided text | 30 |

¹ const SYMBOLS = 'abcdefghijklmnopqrstuvwxyz!@#$%^&*()_+-={}[]'

License: MIT Author: @samwyness Inspired by baffle.js