react-textscramble

npm package with react text scramble component (effect). Demo can be found at https://dagut.ru starting from 01.09.2019

npm install react-textscramble

Props

  "phrases": PropTypes.arrayOf(PropTypes.string).isRequired,
  "reportProgress":PropTypes.func,
  "freezeDuration": PropTypes.number,
  "isInfiniteLoop": PropTypes.bool

"phrases" - array of phrases that should be shown to the user

"reportProgress" -function that will be called each time phrase was fully shown it has argument that shows in percent ([0,1]) what progress was made

"freezeDuration" time that each phrase should be displayed after appearing, default value - 800

"isInfiniteLoop" set this to true if you want this text to loop over all phrases again and again (infinitely). Default value: false

Example with progress bar

import React, {Component} from 'react';
import TextScramble from 'react-textscramble';
import './MainScreen.css';

/**
 * This is main block that will be displayed in welcomepage component
 * It has nice text effect and more cool stuff will be added later
 *
 * @export
 * @class MainScreen
 * @extends {Component}
 */
export default class MainScreen extends Component {
  constructor() {
    super();

    this.state = {
      scrambleProgess: 0
    }
  }

  render() {
    // phrases list and freeDuration for TextScramble. Defined here just for
    // visibility
    let phrases = [
      'Hi',
      'How are you doing?',
      'I am still working on this site!',
      'So something might not be working',
      'And site will change a little bit in the end',
      'But please enjoy your visit! ☺'
    ];
    let freezeDuration = 1600;

    //and now we render :)
    return (
      <div className="MainScreen">
        <div className="top-right-text">
          <span className="TextScramble-progressbar">
            <span
              className="underline"
              style={{
              'width': `${Math.floor(this.state.scrambleProgess * 100)}%`
            }}></span>progress bar :)</span>
        </div>
        <div className="scramble-container">
         <TextScramble
            phrases={phrases}
            freezeDuration={freezeDuration}
            reportProgress={(progress) => {
            this.setState({"scrambleProgess": progress})
          }}/>
        </div>
      </div>
    )
  }
}

and MainScreen.css

@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';
.MainScreen {
  font-family: 'Roboto Mono', monospace;
  background: #212121;
  height: 100vh;
  width: 100%;
  position:relative;
  justify-content: center;
  align-items: center;
  display: flex;
}
.MainScreen .scramble-container {
    font-weight: 100;
    font-size: 28px;
    color: #fafafa;
    text-align: center;
}
.MainScreen .dud {
  color: #757575;
}

.top-right-text {
    position: absolute;
    top:10px;
    right:10px;
}

.TextScramble-progressbar {
    color:white;
    position:relative;
}

.TextScramble-progressbar .underline {
    position: absolute;
    bottom: 0; left: 0;
    width: 0px;
    height: 2px;
    background-color: white;
    transition-property: width;
    transition-duration:1s;
  }