From a8fc4ce58139a85132df199a159e7e0b022d2e9a Mon Sep 17 00:00:00 2001
From: Arjun Mahishi <arjun.mahishi@gmail.com>
Date: Mon, 24 Dec 2018 14:42:52 +0530
Subject: [PATCH] Created Timer component

---
 snippets/Timer.md | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 snippets/Timer.md

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 (
+			<div>
+				<span style={{fontSize: 100}}>{this.state.timer}</span>       
+				<button onClick={this.tick}>Tick!</button>
+				<button onClick={() => {
+					this.setState({timer: 0})
+					clearInterval(this.interval)
+				}}>Reset</button>
+			</div>
+		);
+	}
+
+}
+```
+
+```jsx
+ReactDOM.render(<Timer time={5} interval={1000} />, document.getElementById('root'));
+```
\ No newline at end of file