text

React & TypeScript text scramble effect

Sep 09, 2020
React & TypeScript text scramble effect

React text scramble effect

React & TypeScript text scramble effect.

View Demo View Github

  • React & TypeScript component
  • lightweight package ~7kB

Setup

npm install @twistezo/react-text-scramble or yarn add @twistezo/react-text-scramble

Usage

const texts: ScrambleTexts = [ 'lorem ipsum', 'dolor sit amet', 'consectetur adipiscing elit' ] <TextScramble texts={texts} />

Types and props

type ScrambleText = string type ScrambleTexts = ScrambleText[] type TextScrambleProps = { texts: ScrambleTexts className?: string letterSpeed?: number // [ms] nextLetterSpeed?: number // [ms] paused?: boolean pauseTime?: number // [ms] }

Defaults

letterSpeed = 5 nextLetterSpeed = 100 paused = false pauseTime = 1500

GitHub

Recommended