letter-animation

basic-animation.js

import React, { Component } from 'react';
import random from 'lodash/random';
import sampleSize from 'lodash/sampleSize';
import FlipMove from 'react-flip-move';

const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

function getSubsetOfAlphabet() { ... }

class LetterDemo extends Component {
  constructor(props) { ... }

  componentWillMount() { ... }

  componentWillUnmount() { ... }

  renderLetters() {
    return this.state.letters.map(letter => (
      <span key={letter} style={{display: 'inline-block'}}>
        {letter}
      </span>
    ))
  }

  render() {
    return (
      <div className="letter-demo">
        <FlipMove>
          {this.renderLetters()}
        </FlipMove>
      </div>
    );
  }
}

export default LetterDemo;