pqina / flip Goto Github PK
View Code? Open in Web Editor NEW⏳ The online version of the classic flip clock
Home Page: https://pqina.nl/flip/
License: MIT License
⏳ The online version of the classic flip clock
Home Page: https://pqina.nl/flip/
License: MIT License
Hi,
Flip is absolutely awesome. It is super simple to setup a count down timer.
My challenge is that we are heavily utilizing JQuery and it isn't obvious how to have the "data-did-init" invoke a JQuery method to do a countdown OR how to wire up the method from JQuery (I would expect this is the approach needed).
Say I have the following HTML:
<div id="preview-countdown" class="tick">
<div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay">
<div class="tick-group">
<div data-key="value" data-repeat="true" data-transform="pad(00) split -> delay">
<span data-view="flip"></span>
</div>
<span data-key="label" data-view="text" class="tick-label"></span>
</div>
</div>
</div>
How would I be able to from JQuery attach my own "handleTickInit" method?
I suspect the solution involves using the find method and have tried the following but it complains that "Uncaught TypeError: Cannot read properties of undefined (reading 'count')"
$('#preview-countdown').tick.count.down(new Date(previewMode), {
format: ['d', 'h', 'm', 's'],
interval: 1000
}).onupdate = function(value) {
$.tick.value = value;
};
What is strange is that I see the tick is initialized by the fact that the data-state says so but just don't know how to attach the method to handle the tick object. Ultimately, I assume it is super simple and others might benefit from docs updated to include this manner to access this great counter.
Thanks!
Whats the best way to style tick-flip-panel
in React.js ?
I saw that its possible to pass in a view to Tick.DOM.create
but couldnt find any examples of it.
Im specifically looking at ways to dynamically change the color of tick-flip-panel
Hi,
Is there any possibility to pause, resume and reset a countdown from Tick.count.down method?
Thanks!
Hi @rikschennink ! Tried to adapt your code to include days. Your code:
Tick.count.down('2021-11-26T00:01:00', { format: ['h','m','s'] }).onupdate = function (value) {
var d = Tick.helper.date();
tick.value = {
hours: d.getHours(),
minutes: d.getMinutes(),
seconds: d.getSeconds()
};
};
my code:
Tick.count.down('2021-11-26T00:01:00', { format: ['d','h','m','s'] }).onupdate = function (value) {
var d = Tick.helper.date();
tick.value = {
days: d.getDays(),
hours: d.getHours(),
minutes: d.getMinutes(),
seconds: d.getSeconds()
};
};
but then i get Uncaught TypeError: d.getDays is not a function. why does it not work?
In minifier CSS and JS a version is 1.7.5...
Tnx a lot
in production mode, while it works nicely in development.
Any idea pretty please?
import React, { useRef, useEffect } from "react";
import Tick from "@pqina/flip";
import "@pqina/flip/dist/flip.min.css";
import './custom.scss';
export const Flip = ({ value, cssClasses }) => {
const divRef = useRef();
const tickRef = useRef();
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);
});
useEffect(() => {
if (tickRef.current) {
tickRef.current.value = value;
}
}, [value]);
const getTickClasses = () => {
const classes = ['tick'];
if (cssClasses) {
classes.push(cssClasses);
}
return classes.join(' ');
};
return (
<div ref={divRef} className={getTickClasses}>
<div data-repeat="true">
<span data-view="flip">Tick</span>
</div>
</div>
);
};
<Flip cssClasses={this.getFlipClasses()} value={count} />
# package.json
"@pqina/flip": "^1.7.5",
flip demo:
https://codesandbox.io/s/vue-flip-demo-xhtfk
add data-style="flip-duration:500ms"
to <span data-view="flip"></span>
result:
<span data-view="flip" data-style="flip-duration:500ms"></span>
then the flipping effects not working, pls
Hi, A great Thanks for your amazing contribution to make the flip package available as an npm module.
I have tried to import it to display a simple flip timer (that should display time form 00:00 sec until an event (function) get fired. I want to stop the watch when the function is called.
Can you please show an example to show the timer in a React functional component using hooks?
I'm attempting to create an initial flipper value of "???". Then on a specific event, I'd like to flip the counter over to zeros, and count upwards to a specific 3-digit (or less) number.
I'm using the following for the numeric counting: data-transform="arrive(9, .001) -> round -> pad('???') -> split -> delay(rtl, 100, 150)"
(adapted from the "Animated Values" example).
I've tried playing around with the documentation here and messed with variations on data-transform="transform(split() -> map(replace('?', '0'))) -> arrive(9, .001) -> round -> pad('000') -> split -> delay(rtl, 100, 150)"
, but it either didn't achieve what I wanted or threw errors.
Happy to provide more context if needed. Ideally, the flipper would function like this:
Thanks!
Hi,
I am trying to display a rather complex timer schedule that basically consists of several from .. till .. every xx minutes
. It seems that no matter what I pass as argument to count.schedule
, nothing is rendered. Instead, I get
<div class="tick" data-did-init="handleTickInit" data-state="initialised">
<div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(h, m, s) -> delay">
</div>
</div>
in the DOM and Tick fails silently.
My actual code in handleTickInit
function look like this:
Tick.count.schedule(
'every day at 18:30, from 1:20 till 2:50 every 30 minutes, from 8:30 till 10:20 every 25 minutes, from 12:20 till 14:20 every 30 minutes, from 21 till 22:15 every 25 minutes', {format:['h', 'm', 's']}
).onupdate = function(value) {
tick.value = value;
};
Removing all from .. till .. every .. minutes
makes Tick work as expected.
BTW. Really looking forward to using count.schedule
as it seems to be a perfect fit for my needs. Thanks for your time!
The 1st example on https://pqina.nl/flip/ (Event Countdown) is not working when I add transform
I get the following error:
TypeError: value.map is not a function
Without it, it works perfectly fine.
Here's a codesandbox demo: https://codesandbox.io/s/flip-transform-not-working-bqmwg?file=/src/EventCountdown.js
Here's the code for brevity:
import React from "react";
import "./styles.css";
import { EventCountdown } from "./EventCountdown";
export default function App() {
return (
<div className="App">
<h1>Flip not working with transform</h1>
<EventCountdown value="2021" />
</div>
);
}
import React, { useRef, useEffect, useState } from "react";
import Tick from "@pqina/flip";
export const EventCountdown = ({ 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: ["y", "M", "d", "h", "m", "s"]
});
// When the counter updates, update React's state value
counter.onupdate = function(value) {
setTickValue(value);
};
return () => {
counter.timer.stop();
};
}, [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"
data-layout="horizontal fit"
data-transform="preset(d, h, m, s) -> delay"
>
<div className="tick-group">
<div
data-key="value"
data-repeat="true"
data-transform="pad(00) -> split -> delay"
>
<span data-view="flip" />
</div>
<span data-key="label" data-view="text" className="tick-label" />
</div>
</div>
</div>
);
};
Working examples with React can be found here: https://codesandbox.io/s/react-flip-countdown-timer-8tin3?file=/src/App.js
When a single digit number is shown then it is written as 7
instead of 07
even though in transform, there is a pad(00)
. Maybe the ,
is shown instead of 0
idk?
Same codesandbox demonstrating what I am talking about: https://codesandbox.io/s/flip-padding-not-working-bqmwg?file=/src/EventCountdown.js
Here's the code for brevity:
import React from "react";
import "@pqina/flip/dist/flip.min.css";
import { EventCountdown } from "./EventCountdown";
export default function App() {
return (
<div>
<h1>Flip padding not working</h1>
<h1>
<EventCountdown value="2021-01-01T00:00:00+01:00" />
</h1>
</div>
);
}
import React, { useRef, useEffect, useState } from "react";
import Tick from "@pqina/flip";
export const EventCountdown = ({ 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);
// When the counter updates, update React's state value
counter.onupdate = function(value) {
setTickValue(value);
};
return () => {
counter.timer.stop();
};
}, [value]);
// When the tickValue is updated, update the Tick.DOM element
useEffect(() => {
if (tickRef.current) {
tickRef.current.value = tickValue;
}
}, [tickValue]);
return (
<div className="tick">
<div
data-repeat="true"
data-layout="horizontal fit"
data-transform="preset(d, h, m, s) -> delay"
>
<div className="tick-group">
<div
ref={divRef}
data-repeat="true"
data-transform="pad(00) -> split -> delay"
>
<span data-view="flip" />
</div>
<span data-key="label" data-view="text" className="tick-label" />
</div>
</div>
</div>
);
};
My Code is simple:
function handleTickInit(tick) {
var opt = { format: ['y', 'M', 'd', 'h', 'm', 's'] };
var ticker = null;
ticker = Tick.count.down('2021-03-30', opt);
ticker.onupdate = function (value) {
tick.value = value;
}
}
<div class="tick" data-did-init="handleTickInit">
<div data-repeat="true" data-layout="horizontal fit" data-transform="preset(y, M, d, h, m, s) -> delay">
<div class="tick-group">
<div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
<span data-view="flip"></span>
</div>
<span data-key="label" data-view="text" class="tick-label"></span>
</div>
</div>
</div>
Count is stuck and nothing heppens:
When I change date to be different than 30th of month it runs. Also it runs when I remove "M" from preset and format. Strange...
I am trying to implement this library in my Framework7 project (with pure Javascript) and I'm having some problems. I would like to know if you can help me.
I want to create, a kind of Pomodoro, like this (https://codepen.io/putraaryotama/pen/wgwqBB) but with @pqina/flip.
In this Sandbox you can see how far I have advanced: https://codesandbox.io/s/loving-feather-hmcx6
The points that I am not achieving are the following:
The whole implementation is in the file "src/pages/home.f7.html".
I have read the complete documentation (https://pqina.nl/tick/) and tried many alternatives but I cannot unlock those points, I would appreciate if you can help me.
Thank you, Fabricio
Optionally hiding the Flip component in react with ternary operator causes a "NotFoundError: Node.removeChild: The node to be removed is not a child of this node".
This is because of the Tick.DOM.destroy(this._tickRef.current);
in componentWillUnmount()
.
Is there any workaround for this? I like the way this flip counter looks a lot and I'd hate to have to replace is by something else just to fix this.
Hello there,
I am wanting to achieve an evergreen countdown timer that repeats itself every 2 days or 48 hours with tick.count.schedule()
I have tried both:
But I don't think that the logical English syntax is supported.
How can I achieve this?
Could you explain why flip freezes when I leave the page and how to fix it?
As for example you can check your demos on https://pqina.nl/flip/#nutshell
the counters will stop when you switch to another tab and will continue when return back.
The code I am using is:
var tick = Tick.DOM.create({
value: "Asdfg",
view:
// definition for top level tick element
{
children:[
// presenter object
{
root: 'div',
repeat: true,
layout: 'horizontal fit',
transform: 'upper -> split -> delay(random, 100, 150)',
children: [
// presenter object
{
view: 'flip',
transform: 'ascii -> arrive -> round -> char(a-zA-Z)'
}
]
}
]
}
});
window.document.body.appendChild(tick.root);
I am not able to find documentation for transform component preset
, which is used eg. in flip example flip-master/example/index.html
. There are many methods in the docs on https://pqina.nl/tick/#value-transforms, but this one is missing.
Hi !
I need to create 5 value counters with differents values and intervals on a same page. I can't find on flip documentation how to do it.
Is it possible to add data on html and use only one function ?
I'm trying to work with this one :
function handleTickInit(tick) {
// update the value every 5 seconds
var interval = Tick.helper.duration(5, 'seconds');
// value to add each interval
var valuePerInterval = 1;
// offset is a fixed date in the past
var dateOffset = Tick.helper.date('2021-04-19');
// value to start with, the value of the counter at the offset date
var valueOffset = 17143;
// uncomment lines below (and comment line above) if you want offset be set to the first time the user visited the page
// var offset = parseInt(localStorage.getItem('tick-value-counter-offset') || Date.now(), 10);
// localStorage.setItem('tick-value-counter-offset', offset);
// start updating the counter each second
Tick.helper.interval(function () {
// current time in milliseconds
var now = Date.now();
// difference with offset time in milliseconds
var diff = now - dateOffset;
// total time since offset divide by interval gives us the amount of loops since offset
var loops = diff / interval;
// this will make sure we only count completed loops.
loops = Math.floor(loops);
// multiply that by the value per interval and you have your final value
tick.value = valueOffset + (loops * valuePerInterval);
}, 1000);
}
Thanks in advance
I am unable to figure how to set days
, hours
, minutes
& seconds
in the counter.
I tried every transform but either it makes the counter stop or it places days
, hours
at awkward places like before or after the comma.
Currently I see 9,13,59,20
but what I want is 9 days, 13 hours, 59 minutes & 20 seconds
where the numbers flip & the text remains static :)
Would love to know the answer to this as well?
Code & Sandbox is the same as issue #10
I'm always getting this error even with the example index.html, when it is hosted on a web server But in localhost it works as expected.
Uncaught Can't get extension with name "elay", "elay" is not available. The following extensions are available: "ascii", "char", "tween", "value", "input", "rotate", "map", "transform", "upper", "lower", "abs", "add", "subtract", "modulus", "pad", "number", "replace", "round", "ceil", "floor", "fraction", "percentage", "multiply", "divide", "split", "format", "plural", "limit", "reverse", "arrive", "spring", "delay", "step", "keys", "duration", "substring", "preset"
Hi,
I am using the flip with a large number 5399 but although I have set the
<div data-layout="horizontal right" data-repeat="true" data-transform="arrive(9, .005) -> round -> pad(' ') -> split -> delay(rtl, 10, 50)"> <span data-view="flip"></span> </div>
I am looking to ensure the flip is completed within 5 seconds.
Any help is appreciated.
Hello, I came across this plugin in a recent front-end newsletter and I decided to give it a try. First of all, thank you so much, the look is great and it does a lot of stuff! However I implemented it today and I need some assistance with some things. I took the "Event Countdown" example.
URL: http://theintegrateur.com/clients/css/visite-virtuelle.html
Thanks! :)
May I pay you a beer or coffee?
Hi there,
Love the component and would love to use it in my application, but I am unsure how to port it over to Angular.
I don't suppose you have any knowledge how to make this available in an AngularJS application?
I have a countdown running in my App and I need to send alerts at certain times regardless of whether the App is in foreground or in background.
In foreground the "onupdate" event fires correctly but in background it does not.
Here is an example of my implementation in Framework7 App and I attach an screen where it is evident that the "onupdate" is not fired when I move to background.
In the documentation I have not found a way to avoid this "sleep" of the timer. Could you give me any implementation or workaround suggestions?
Thanks in advance
I tried to integrate your component into our web application and I encountered two bugs while testing. I managed to fix them and I provide fixes below. Line numbers are related to https://github.com/pqina/flip/blob/master/dist/flip.js
Bugs and fixes:
When started minimized timer wouldn't start. I discovered there's a problem with sleepIntervalOffset being null and this happens because of code on line #4155 (if(isDocumentHidden()...) which should really be executed after line #4161, so after calculating tickExpectedTime. Fixed lines:
#4154... 4161:
// the moment the timeout should end
tickExpectedTime = now$2() + interval;
// stop here if document is hidden at start time
if (isDocumentHidden()) {
didHideDocument();
return;
}
1px offset when drawing, style == flip. I discovered it's related to css transform being rotateX(-360) - see line #658. Fix is easy: there's no 1px offset if you set degrees to 0 instead of -360 and you also add translateZ and scale so the fixed two lines are as follows:
#657: this._front.style.transform = 'rotateX(' + degrees + 'deg) translateZ(0) scale(1.0, 1.0)';
#658: this._back.style.transform = 'rotateX(' + (-180 + degrees) == -360 ? 0 : (-180 + degrees) + 'deg) translateZ(0) scale(1.0, 1.0)';
I found both flip.min.js
and flip.min.css
on JSDeliver
. I think it is possible to add the CDN installation to the README file.
https://www.jsdelivr.com/package/npm/@pqina/flip?path=dist&tab=collection
I am trying to rebuild this recurring event demo (https://pqina.nl/flip/#nutshell) using JavaScript since I need to output the same countdown on multiple places on a single page.
I've got it close, but am having trouble trying to figure out how to recreate the .tick-group div using JavaScript/Presenters. Any chance you could point me in the right direction here?
// Flip.js
// https://pqina.nl/flip/
var elements = document.querySelectorAll('.countdown')
if (elements.length > 0) {
elements.forEach(element => {
var tick = Tick.DOM.create(element, {
view: {
children:[
{
root: 'div',
transform: 'preset(d, h, m, s) -> delay',
key: 'value',
children: [
{
view: 'flip'
}
],
layout: 'horizontal fill',
repeat: true
}
]
},
didInit: function(tick) {
Tick.count.schedule('every day at 0').onupdate = function(value) {
tick.value = value
}
}
})
})
}
// END Flip.js
Trying to get this example working https://pqina.nl/flip/preset-animated-values.html
As soon as I add the data-transform, I get the following js error t.shift is not a function
If the data-transform is omitted, the flip counter shows as expected
Tried using both the dist
and the CDN versions (for context, trying to get this on a wordpress site).
Your countdown timer is by far the best :) Congratulations
How would you wrap this in a vue component?
Returning a timestamp 1659265959 on page load then working fine
So, it is breaking on page load then working
so need to assign a value to data-value after page completely load
how can i do ?
Thanks
If I pass 2020-06-10T00:00:00+01:00
as the time, the first time it shows the whole thing for 1 second at least which feels janky. Try reloading the codesandbox to see the effect :)
Would love to know a way to suppress that?
Code & Sandbox is the same as issue #10
Hi,
How can I change the color and background color dynamically?
I try using jquery but it's not working.
$('#colorpicker').change(function() {
var val = $(this).val();
$('.tick-flip-panel').css('background-color', val);
});
Hi~
I tried using the Flip in nuxt3.
Cannot read properties of null (reading 'plugin')
Can it be compatible in SSR?
calling Tick.DOM.destroy(ref.current);
when cleaning up a React component can sometimes throw the following error:
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
The issue can be reproduced here by clicking the 'toggle' button: https://codesandbox.io/s/react-flip-demo-z715o?file=/src/App.js
Maybe flip could expose a second cleanup method (that only removes listeners) that doesn't also try to modify the dom, so React (or Vue) can call it safely?
tick.core.module.js
var destroyer = (function (state) {
return {
destroy: function destroy() {
if (state.root && state.root.parentNode) {
// This will crash React
// state.root.parentNode.removeChild(state.root);
}
}
};
});
Hi,
How can I change the color and background color dynamically?
I try using jquery but it's not working.
$('#colorpicker').change(function() {
var val = $(this).val();
$('.tick-flip-panel').css('background-color', val);
});
I've seen the other Issue from React
, but i prefer to use it as an npm-module
directly inside a component and not globally, it's possible?
Hey guys, I tried to use @pqina/flip library but just won't work I copied the component code in here codesandbox vue flip but I get this error
package.json
my component
I tried using this module with NextJs but facing an error
SyntaxError: Cannot use import statement outside a module
/node_modules/@pqina/flip/dist/flip.module.js:1
import Tick from '../tick/tick.core.module';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:984:16)
at Module._compile (internal/modules/cjs/loader.js:1032:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.@pqina/flip (/Users/vivek/Documents/Singularity/snet-airdrop/.next/server/pages/index.js:449:18)
at __webpack_require__ (/Users/vivek/Documents/Singularity/snet-airdrop/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./snet-ui/FlipClock.tsx/Flip.tsx:7:69) {
page: '/'
}
Hi.
I've installed Flip via npm. included it
import Tick from '@pqina/flip';
console.log(Tick);
And placed in my project using one of the examples
<div class="tick" data-did-init="handleTickInit">
<div data-repeat="true" data-layout="horizontal fit" data-transform="preset(d, h, m, s) -> delay">
<div class="tick-group">
<div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
<span data-view="flip"></span>
</div>
<span data-key="label" data-view="text" class="tick-label"></span>
</div>
</div>
</div>
<script>
function handleTickInit(tick) {
let locale = {
YEAR_PLURAL: 'Lat',
YEAR_SINGULAR: 'Rok',
MONTH_PLURAL: 'Miesięcy',
MONTH_SINGULAR: 'Miesiąc',
WEEK_PLURAL: 'Tygodni',
WEEK_SINGULAR: 'Tydzień',
DAY_PLURAL: 'Dni',
DAY_SINGULAR: 'Dzień',
HOUR_PLURAL: 'Godzin',
HOUR_SINGULAR: 'Godzina',
MINUTE_PLURAL: 'Minut',
MINUTE_SINGULAR: 'Minuta',
SECOND_PLURAL: 'Sekund',
SECOND_SINGULAR: 'Sekunda',
MILLISECOND_PLURAL: 'Milisekund',
MILLISECOND_SINGULAR: 'Milisekunda'
};
for (var key in locale) {
if (!locale.hasOwnProperty(key)) { continue; }
tick.setConstant(key, locale[key]);
}
var counter = Tick.count.down('2021-01-01T00:00:00+01:00');
counter.onupdate = function(value) {
tick.value = value;
};
counter.onended = function() {
// redirect, uncomment the next line
// window.location = 'my-location.html'
// hide counter, uncomment the next line
// tick.root.style.display = 'none';
// show message, uncomment the next line
// document.querySelector('.tick-onended-message').style.display = '';
};
}
</script>
But nothing is shown. In the console I've got confirmation that its included.
{
"supported": true,
"options": {},
"helper": {},
"data": {},
"DOM": {},
"count": {},
"plugin": {}
}
What can be the problem? Am I missing something? In the console the're no issues or errors.
I'm using parcel bundler if that's any help.
I'm having a little trouble bringing the code from the codesandbox, https://codesandbox.io/s/gifted-newton-xhtfk created from issue #6, into my nuxt project. I'm getting the error of "Unexpected token import" on line 10 "import Tick from "@pqina/flip";" in ./components/Flip.vue.
I created a brand new create-nuxt-app repo for debugging purposes, https://github.com/jaymefrantz/nuxt-flip-example.
Any pushes in the right direction would be greatly appreciated.
Not sure if I'm doing something wrong, but sometimes the counter displays the incorrect value. (I'm essentially using the slow reveal code from https://pqina.nl/flip/ (slow reveal).
Here is my code:
https://codepen.io/julianthompson/pen/poVOwdW
You'll need to refresh a few times to get the wrong value. Its usually one digit out. I got two wrong values in 10 refreshes. Counter 1 should be 631 and it displayed 231.
Hi!
Thanks for such a great flip counter plugin!
Is there a way to implement another language?
I need "weeks" , "days", "minutes", "seconds" in other languages also, depending on website language..
Hey I have a problem when installing the package in my projet.
...\node_modules@pqina\flip\dist\flip.module.js:1
import Tick from '@pqina/flip/tick/tick.core.module';
^^^^^^
SyntaxError: Cannot use import statement outside a module
I can't put 'type:'module' ,in my package.json or i have another error.
I'm using ES6
My dependecies :
"@babel/core": "^7.12.3",
"react": "16.13.1",
Hi, first of all, congratulations for the great library.
It's the best flip card I've found! It works really amazing.
I'm wondering how can I use it imperatively? So if I have a div where I want to render the flip, how I can add it to this div having only the div reference?
My idea is to integrate in a side project I'm building in ReactJS.
If you have any idea.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.