Publish on NPM

[deadcoder0904]

Also, is there any difference between tick & flip?

From what I can tell tick seems more lower level than flip.

[rikschennink]

Flip has tick as a dependency. Default package contains Flip + Tick.

Should public to npm but haven't gotten around to it.

[deadcoder0904]

So we can't use flip from tick? Rather the other way 🙈

I was reading the docs just now & it shows tabs where it used flip. That's a little confusing.

Can you publish flip CSS & JS files like the rest of the others in the dist/?

I think I managed to get it all working except flip & some minor issues like #2

[deadcoder0904]

Default package contains Flip + Tick.

There's some commented CSS in dist/core/tick.core.css if you meant flip is already there in this package. I just couldn't get it working by doing data-view="flip" :)

[rikschennink]

tick is there in the flip package :-)

[deadcoder0904]

I was talking about this commented code which will enable flip in tick package.

Not sure if you've done that purposely or forgot about it since data-view="flip" doesn't work in tick yet the docs say it does.

[rikschennink]

@deadcoder0904 oh it's old code, forgot to remove :)

[rikschennink]

It should work if you load the Flip view as a plugin.

[deadcoder0904]

I can't get it to work. Where is the Flip module?

It throws an error Uncaught ReferenceError: Flip is not defined. I have even imported everything necessary I think.

Here's my code:

<link rel="stylesheet" href="../dist/core/tick.core.min.css" />
<link rel="stylesheet" href="../dist/view-boom/tick.view.boom.min.css" />
<link rel="stylesheet" href="../dist/view-dots/tick.view.dots.min.css" />
<link rel="stylesheet" href="../dist/view-line/tick.view.line.min.css" />
<link rel="stylesheet" href="../dist/view-swap/tick.view.swap.min.css" />

<p>
    Count up to a date - How many days have passed since 1st Janurary 2020?
</p>
<div class="tick" data-did-init="startDateCountUp">
    <span data-view="flip"></span>
</div>

<script>
    function startDateCountUp(tick) {
        console.log(`start date countup...`)
        Tick.plugin.add(Flip)
        var counter = Tick.count.up('2020', {
            format: ['d', 'h', 'm', 's'],
        })
        counter.onupdate = function (value) {
            tick.value = value
        }
    }
</script>

<script src="../dist/font-highres/tick.font.highres.global.min.js"></script>
<script src="../dist/font-lowres/tick.font.lowres.global.min.js"></script>
<script src="../dist/view-boom/tick.view.boom.global.min.js"></script>
<script src="../dist/view-dots/tick.view.dots.global.min.js"></script>
<script src="../dist/view-line/tick.view.line.global.min.js"></script>
<script src="../dist/view-swap/tick.view.swap.global.min.js"></script>
<script src="../dist/core/tick.core.kickstart.min.js"></script>

And if I replace Tick.plugin.add(Flip) with Tick.plugin.add('view', 'flip'), then I get the following error:

Uncaught Can't get extension with name "flip", "flip" is not available. The following extensions are available: "text", "boom", "dots", "line", "swap", "flip"

[rikschennink]

https://github.com/pqina/flip

[deadcoder0904]

Oh gotcha. Gotta download that 🤣

[deadcoder0904]

Thanks @rikschennink for an amazing product. Just got it working. Here's for future reference:

<link rel="stylesheet" href="../dist/view-flip/tick.view.flip.min.css" />

<p>
    Count up to a date - How many days have passed since 1st Janurary 2020?
</p>
<div class="tick" data-did-init="startDateCountUp">
    <span data-view="flip"></span>
</div>

<script>
    function startDateCountUp(tick) {
        console.log(`start date countup...`)
        var counter = Tick.count.up('2020', {
            format: ['d', 'h', 'm', 's'],
        })
        counter.onupdate = function (value) {
            tick.value = value
        }
    }
</script>

<script src="../dist/view-flip/tick.view.flip.global.min.js"></script>

[deadcoder0904]

Trying the published NPM module right now.

Getting another error:

Can't get extension with name "dots", "dots" is not available. The following extensions are available: "text"

Even though I have imported @pqina/tick which should import everything (correct me if I'm wrong) & explicitly imported everything again.

tick should work exactly like flip if I'm not wrong because flip's documentation links to tick as well. And well it's not working. It says I can only use text extension.

I also commented some code (explicit imports of dots.min.css & dots.min.js). Even adding via Plugin doesn't work.

https://codesandbox.io/s/react-tick-countdown-timer-fl9do?file=/src/Ticker.js

[rikschennink]

It doesn't import everything, only core. I think you need to import the rest manually. I haven't tested this yet. But something like this should work.

import Tick from '@pqina/tick';

console.log('Tick', Tick);

import Dots from '@pqina/tick/dist/view-dots/tick.view.dots.module';

console.log('Dots', Dots);

[deadcoder0904]

Yeah I did that, I even added css & js files with correct ordering but it didn't even work. You can check the codesandbox.

It has everything you mentioned. I also added Dots as a plugin. But still doesn't work.

[rikschennink]

@deadcoder0904 https://codesandbox.io/s/react-tick-countdown-timer-q1epv?file=/src/Ticker.js

[deadcoder0904]

Thanks that's great. Any suggestions where do I add Tick.count.down because I don't know where to add it or how it will work?

[rikschennink]

@deadcoder0904 Example here: https://pqina.nl/flip/preset-event-countdown.html

[deadcoder0904]

Yes I have it working in my HTML file. Everything is working fine there. But while converting to React, I don't know where to put it. I tried doing it already :)

I think this is the final piece of the puzzle. Once I get this working, then hopefully everything else is figured out. Sorry for too much trouble :)

[rikschennink]

Maybe someone else can help, I’m swamped for the next couple weeks

[deadcoder0904]

After many trials & errors, I posted this on Reddit & StackOverflow & at /r/reactjs found the answer. Here's a working solution:

import React, { useRef, useEffect, useState } from "react";
import Tick from "@pqina/flip";
import "@pqina/flip/dist/flip.min.css";

export const WorkingFlipDate = ({ value }) => {
  const divRef = useRef();
  const tickRef = useRef();

  const [tickValue, setTickValue] = useState(value);

  // Make the Tick instance and store it in the refs
  useEffect(() => {
    const didInit = tick => {
      tickRef.current = tick;
    };

    const currDiv = divRef.current;
    const tickValue = tickRef.current;
    Tick.DOM.create(currDiv, {
      value,
      didInit
    });
    return () => Tick.DOM.destroy(tickValue);
  }, [value]);

  // Start the Tick.down process
  useEffect(() => {
    const counter = Tick.count.down(value, {
      format: ["d", "h", "m", "s"]
    });

    // When the counter updates, update React's state value
    counter.onupdate = function(value) {
      setTickValue(value);
    };

    // TODO: I don't know how to destroy this
    return () => {
      counter.onupdate = () => {};
    };
  }, [value]);

  // When the tickValue is updated, update the Tick.DOM element
  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = tickValue;
    }
  }, [tickValue]);

  return (
    <div ref={divRef} className="tick">
      <div data-repeat="true">
        <span data-view="flip">Tick</span>
      </div>
    </div>
  );
};

@rikschennink is there a way to destroy the counter? Check the TODO: comment in the above solution.

[rikschennink]

@deadcoder0904 I think it's counter.timer.stop()