rand-char-react-component.jsx

import React, {PropTypes, Component} from 'react/addons';
import './rand-char-react-component.scss';

export default class RandCharReactComponent extends React.Component {
    static propTypes = {
        characters: PropTypes.array
    }
    static defaultProps = {
        characters: ['☺', '☺', '☻', '☹', '☼', '☂', '☃', '⚛', '✆', '', '⌘', '⇧', '✡', '☭', '☜', '☞', '☝', '☟', '✌', '✔', '★', '♺', '✈', '♥', '♪', '♫', '♬', '♀', '♂', '⚢', '⚣', '✖', '∞', '¥', '€', '$', '¢', '£', '©', '®', '@'],
    };
    constructor(props) {
        super(props);
        this.state = { 
            loop: null,
            loading: props.loading,
            character: '' 
        };
    }
    randomCharacter() {
        return this.props.characters[Math.floor(Math.random() * this.props.characters.length)];
    };
    componentWillUpdate() {
        var self = this;

        if(self.state.loading === true) {

            document.documentElement.setAttribute('data-loading', '');

            if ( self.state.loop == null ) {
                self.state.loop = setInterval(function() {
                    self.setState({
                        character : self.randomCharacter()
                    })
                }, 50);
            }
        } else {
            document.documentElement.setAttribute('data-loading', false);
            clearInterval(self.state.loop);
            self.setState({loop: null});
        }
    }

    render() {
        return <div dangerouslySetInnerHTML={{__html: this.state.character}} className="rand-char-react-component"></div>;
    }
};