React component for text scramble animation.

Live Demo

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.

Todo

• [ ] Accept customize speed by giving number
• [ ] Make random decramble fit roll
• [ ] More action type
• [ ] Options for random char pool