react-scrambled-text

React Scrambled Text

This is a package to create scrambled text animation in react easily. A lightweight package which you just install once and are ready to go

How to install

npm install react-scrambled-text

or

yarn add react-scrambled-text

Usage

Once Installed, you can just import it in your own component and start using it.

Import it using:

import ScrambledAnimation from 'react-scrambled-text'

And you can use it like this:

<ScrambleAnimation
    texts={["hello", "world"]}
    speed={100}
    pauseDuration={2000}
    start={true}
/>

Props

Prop Name	Description	Type	Default Value
texts	multiple texts that are gonna be rendered on the screen after being scrambled	Array	["Hello, World!"]
speed	the speed at which each letter of the text unscrambles(in milliseconds)	Number	100
pauseDuration	duration between the scrambling of two different texts in milliseconds	Number	3000
start	the variable that controls if the animation will play or not	Boolean	true
style	custom styles that you might wanna add to the text being rendered on the screen	React.CSSProperties	null
className	custom className you might wanna give to the text being rendered	string	null