diff --git a/snippets/Ticker.md b/snippets/Ticker.md new file mode 100644 index 000000000..d6e669559 --- /dev/null +++ b/snippets/Ticker.md @@ -0,0 +1,49 @@ +### Ticker + +Renders a ticker component. + +- The ticker state is initially set to zero +- When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval` +- When the `Reset` button is clicked, the value of the timer is set to zero and the `setInterval` is cleared +- The `setInterval` is cleared once the desired `time` is reached +- `time` and `interval` are the required props + +```jsx +class Ticker extends Component { + constructor(props) { + super(props); + this.state = {ticker: 0} + this.interval = null + } + + tick = () => { + this.reset() + this.interval = setInterval(() => { + if (this.state.ticker < this.props.times) { + this.setState(({ ticker }) => ({ticker: ticker + 1})) + }else{ + clearInterval(this.interval) + } + }, this.props.interval) + } + + reset = () => { + this.setState({ticker: 0}) + clearInterval(this.interval) + } + + render() { + return ( +