title: Having trouble converting HTML to React specific code. I am using `@pqina/flip`?
body: <p>I am using <a href="https://github.com/pqina/flip" rel="nofollow noreferrer">https://github.com/pqina/flip</a> &amp; want to implement <code>Tick.count.down()</code> method using React. There's no React specific code that is given in the example &amp; also the author is swamped so thought I'd ask here for some React experts.</p>
  
  <p>I've cloned the above repo &amp; replaced <a href="https://github.com/pqina/flip/tree/master/example/index.html" rel="nofollow noreferrer">https://github.com/pqina/flip/tree/master/example/index.html</a> contents with the following code.</p>
  
  <p>I have the following HTML working perfectly:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;meta name="viewport" content="width=device-width" /&gt;
          &lt;title&gt;Count Down&lt;/title&gt;
  
          &lt;link rel="stylesheet" href="../dist/core/tick.core.min.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;style&gt;
              .tick {
                  font-size: 2rem;
              }
          &lt;/style&gt;
  
          &lt;p&gt;Countdown from 10&lt;/p&gt;
          &lt;div class="tick" data-did-init="startNumericCountdown"&gt;
              &lt;span data-view="text"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;script&gt;
              function startNumericCountdown(tick) {
                  console.log(`start numeric countdown...`)
                  var counter = Tick.count.down(10, 'seconds')
                  counter.onupdate = function (value) {
                      tick.value = value
                  }
                  counter.onended = function () {
                      console.log(`countdown over `)
                  }
              }
          &lt;/script&gt;
  
          &lt;script src="../dist/core/tick.core.kickstart.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem comes when I try to convert it into React. Currently, I have the following code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useRef, useEffect } from "react";
  import Tick from "@pqina/flip";
  import "@pqina/flip/dist/flip.min.css";
  
  export const FlipDate = ({ value }) =&gt; {
    const divRef = useRef();
    const tickRef = useRef();
  
    useEffect(() =&gt; {
      const didInit = tick =&gt; {
        console.log("didInit");
  
        console.log({ tick });
        tickRef.current = tick;
      };
  
      const currDiv = divRef.current;
      const tickValue = tickRef.current;
      Tick.DOM.create(currDiv, {
        value: Tick.count.down(10, 'seconds'),
        didInit
      });
      // divRef.current = Tick.count.down(10, 'seconds');
  
      return () =&gt; Tick.DOM.destroy(tickValue);
    });
  
    useEffect(() =&gt; {
      console.log({ tickRef });
      if (tickRef.current) {
        console.log({ divRef });
        tickRef.current.value = value;
      }
    }, [value]);
  
    return (
      &lt;div ref={divRef} className="tick"&gt;
        &lt;div data-repeat="true"&gt;
          &lt;span data-view="flip"&gt;Tick&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>This does not work as expected. I've got the basic <code>flip</code> library working as you can see in my demo here: <a href="https://codesandbox.io/s/react-flip-countdown-timer-8tin3?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-flip-countdown-timer-8tin3?file=/src/App.js</a></p>
  
  <p>3 of the files are the same code: 1 being using class component <code>Flip.js</code>, 2 using Hooks <code>Flipr.js</code> &amp; <code>Flippen.js</code>.</p>
  
  <p>I want to make <code>FlipDate.js</code> working. It should count down from 10 seconds to 0 seconds. Been trying this for the last week but couldn't wrap my head around this. Any help is appreciated </p>
  
  <p>Sidenote: <a href="https://github.com/pqina/flip" rel="nofollow noreferrer">https://github.com/pqina/flip</a> uses <a href="https://github.com/pqina/tick" rel="nofollow noreferrer">https://github.com/pqina/tick</a> underhood.</p>