Blink.tsx

Blink.tsx

import * as React from 'react'

interface IBlinkProps {
  period: number
}

interface IBlinkState {
  interval: number
  visible: boolean
}

export class Blink extends React.Component<IBlinkProps, IBlinkState> {

  toggleVisibility(){
    this.setState({
      visible: !this.state.visible,
      interval: this.state.interval
    });
  }

  componentWillMount(){
    this.setState({
      interval: window.setInterval(
        this.toggleVisibility.bind(this),
        this.props.period
      ),
      visible: true
    })
  }

  componentWillUnmount(){
    window.clearInterval(this.state.interval);
  }
  
  render(){
    return <span style={{visibility: this.state.visible ? "visible" : "hidden"}}>
      {this.props.children}
    </span>
  }
}