Usage no npm install needed!

<script type="module">
  import twistezoReactTextScramble from 'https://cdn.skypack.dev/@twistezo/react-text-scramble';
</script>

README

React text scramble effect

React & TypeScript component
lightweight package ~7kB

Live example

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