diff --git a/snippets/Timer.md b/snippets/Timer.md new file mode 100644 index 000000000..e82d8b241 --- /dev/null +++ b/snippets/Timer.md @@ -0,0 +1,43 @@ +### Timer + +Renders a timer component. + +The timer state is initially set to zero. When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval`. The `setInterval` is cleared once the desired `time` is reached. `time` and `interval` are the required props. + +```jsx +class Timer extends Component { + constructor(props) { + super(props); + this.state = {timer: 0} + this.interval = null + } + + tick = () => { + this.interval = setInterval(() => { + if (this.state.timer < this.props.time) { + this.setState({timer: this.state.timer + 1}) + }else{ + clearInterval(this.interval) + } + }, this.props.interval) + } + + render() { + return ( +
+ {this.state.timer} + + +
+ ); + } + +} +``` + +```jsx +ReactDOM.render(, document.getElementById('root')); +``` \ No newline at end of file