@skits/react-text-scramble NPM

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 to`random` 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`