Permalink
Cannot retrieve contributors at this time
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>; | |
} | |
}; |