React-scramble NPM

React component for text scramble animation.

Installation

npm install react-scramble --save

Usage

import React from 'react'
import Scramble from 'react-scramble'

class App extends React.Compoent {
  render() {
    return (
      <Scramble
        autoStart
        text="Scramble me!"
        steps={[
          {
            roll: 10,
            action: '+',
            type: 'all',
          },
          {
            action: '-',
            type: 'forward',
          },
        ]}
      />
    )
  }
}

Remember to use monospace fonts to make it looks better.

Step Format

Each step is an Object with following keys:

Key	Type	Default	Description
action	string		Action of the step, `+` as scramble, `-` as descramble and leave blank for do nothing.
roll	number		Times of action in the step.
text	string		Change the original text.
type	string	`all`	Scramble/descrmble type of the step, one of `all`, `random`, `forward`.

Scramble Props

Property	Type	Default	Description
autoStart	boolean	false	Set `true` to auto start animation after render.
bindMethod	function		Method binding callback function, see Bind Methods.
mouseEnterTrigger	string		Event trigger type when mouse enter, one of `start`, `pause`, `reset`, `restart`.
mouseLeaveTrigger	string		Event trigger type when mouse leave, one of `start`, `pause`, `reset`, `restart`.
noBreakSpace	boolean	true	Using no-break space or not.
preScramble	boolean	false	Scramble the text after render.
speed	string	`medium`	Speed of scramble per second, one of `slow`, `mediun`, `fast`.
steps	array		Scramble steps, a list of `Object` in Step format.
text	string		Original text.

Bind Methods

Give callback function to bindMethod to get the control methods of the scramble, for example

class ScrambleCommon extends React.Component {
  render() {
    return (
      <div>
        <Scramble
          text="Nor aware of gain"
          bindMethod={c => {
            this.setState({
              start: c.start,
              pause: c.pause,
            })
          }}
          steps={[
            {
              roll: 10,
              action: '+',
              type: 'all',
            },
            {
              action: '-',
              type: 'forward',
            },
          ]}
        />
        <button onClick={() => this.state.start()}>
          Start
        </button>
        <button onClick={() => this.state.pause()}>
          Pause
        </button>
      </div>
    )
  }
}

methods will be set into state after Scramble component mounted.

It has the following methods: start, pause, reset and restart.