counter.js

import React, { useState, useEffect } from 'react'
import { render } from 'ink'
import Gradient from 'ink-gradient'
import BigText from 'ink-big-text'

const useCounter = () => {
  const [counter, setCounter] = useState(0)
  let i
  useEffect(() => {
    i = setInterval(() => {
      setCounter(c => c + 1)
    }, 500)
  }, () => {
    clearInterval(i)
  })
  return [counter, setCounter]
}

const Counter = () => {
  const [counter] = useCounter()
  return (
    <Gradient name='rainbow'>
      <BigText text={`${counter} unicorns`} />
    </Gradient>
  )
}

render(<Counter />)