ndresx / react-countdown Goto Github PK
View Code? Open in Web Editor NEWA customizable countdown component for React.
License: MIT License
A customizable countdown component for React.
License: MIT License
"react": "^16.2.0",
"react-countdown-now": "^2.1.0",
"typescript": "^3.2.2",
JSX 元素类不支持特性,因为它不具有“props”属性。
不能将类型“{ daysInHours: true; date: any; }”分配给类型“{}”。
类型“{}”上不存在属性“daysInHours”。
Hi ndresx, i was wondering how to code an event in a second specific before the countdown is completed
The default value for Countdown component's zeroPadLength is 2. Therefore days
, minutes
, hours
, and seconds
should return values padded with a default length of two.
Hi,
I am having some issues on Safari and Chrome on IOS only.
this is the output of the counter: "NaN : NaN : NaN"
Iphone 7s plus
IOS veersion 12.4
After installing the module with "yarn add react-countdown-now" command, importing the Countdown component and trying "Custom & Conditional Rendering->Using a React Child for the Completed State" example I faced the following error:
./node_modules/react-countdown-now/dist/Countdown.js
Module not found: Can't resolve 'lodash.isequal' in '../node_modules/react-countdown-now/dist'
Note: installing the "lodash.isequal" package solved the issue.
Please, add to the README.md that "lodash.isequal" package needs to be installed and imported into the project.
I have been using v1.3.0 and updated to v2.0.3.
I've noticed few issues with the updates:
date
parameter isn't passed in renderer prop callback. It's undefined. That wasn't the behavior on v1.3.0. It does exist when it's still counting down.render
is a required prop. From what I can see, any of rendered
, render
or children
can be implemented. None of those are required? And from reading the code, you can't implement renderer
and children
prop, for the completed state, at the same time.First one is easily fixed with a minor change in codebase, or at least written in breaking changes for the release when it occurred.
Seconds and Minutes in renderer do not display leading zeros for render when number is less than ten. Please take a look at the following link for clarification:
Hello,
please help me debug this issue: the countdown sometimes doesn't start (like 1 in 5 times) and stays static. Any idea what might be causing this?
Using custom renderer rest is default.
const Completionist = () =>
(<span className="ui-highlight" style={{ backgroundColor: blueGrey[900] }}>
Ended
</span>);
// Renderer callback with condition
const renderer = ({ formatted: { hours, minutes, seconds }, completed }) => {
if (completed) {
// Render a completed state
return <Completionist />;
}
// Render a countdown
return (
<span
className={classnames('ui-highlight')}
style={{ color: '#FFF', backgroundColor: lightGreen[800] }}
>
{minutes}:{seconds}
</span>
);
};
in component:
...
<Countdown date={expiry_date} renderer={renderer} />
...
I need to use the server's start time as a countdown, but I don't seem to have a description in the documentation.
Does the component support custom start and end times?
How to get current time from Counter in any moment?
The padding zero function seem tobe not working ?
can anyone please check that ?
Hi thanks for this component, it is great!!...
I have the next problem with the zeroPadLength:
Without renderer:
Result: 1:00:03:36
With renderer (same of docs):
renderClock = ({ days, hours, minutes, seconds, completed }) => {
if (completed) {
// Render a completed state
this.forceUpdate()
} else {
// Render a countdown
return <span>{days}:{hours}:{minutes}:{seconds}</span>;
}
}
Result: 1:0:0:36
Integrating react-countdown with react-native snapshot tests makes them finicky. Depending on test order and machine load, the snapshot happens before or after the first countdown second happens, resulting in the test being flakey.
I believe the solution would be to manage the clock for the tests, do you know an easy way to do that?
We are using the now prop to change the default Date.now() so that it will always be Mountain Standard Time no matter where people are using the website. But whenever we use it, the numbers do not continue to countdown, they just stay static on the initial load up numbers. But whenever we take off the now prop, it works just fine and the numbers will continue to count down. Please help and advise if possible.
Hello there,
I have some problems on macOS Safari 12.1.2 @version2.1.1
renderer = ({ days, hours, minutes, seconds, completed }) => {
console.log(days, hours, minutes, seconds, completed);
}
let startDate = new Date('2019-12-12 00:00:00');
<Countdown date={startDate} renderer={this.renderer} />
it works good on Chrome
but NaN – NaN – NaN – NaN – false
on Safari
If I do the below, then onFinished fires as expected, after 2 seconds:
<Countdown targetDate={new Date(Date.now() + 2000)} interval={1000} timeSeparator={':'} format= {{ minute: 'MM', second: 'SS' }} leadingZero={true} onFinished={handleFinish} />
However, If I do this, then onFinished fires when the component is rendered, as opposed to after 2 seconds:
<Countdown targetDate={new Date(Date.now() + 2000)} interval={1000} timeSeparator={':'} format= {{ minute: 'MM', second: 'SS' }} leadingZero={true} onFinished={handleFinish(someParam} />
I'm using formik to implement form like the above, the 获取验证码 is the Countdown component, using this setup the countdown will render when ever input change blur is happened states update this is how form generally works, the problems is that the Countdown will render too much unnecessary times, and with this code below
componentDidUpdate(prevProps: CountdownProps): void {
if (!isEqual(this.props, prevProps)) {
this.setTimeDeltaState(this.calcTimeDelta());
}
}
generated error countdown time delta.
@ndresx Can you please show an example of how to pause the timer and get paused time.
Hey I tried to show countdown for approx 2 days like this for example 42:50:31
but seems like the hours
part can only show it to 24 so if the hours
value go past 24 it will fill days
value
is this expected? since props daysInHours
supposed to count days
as hours
How to compare date value with current date from server not date.now() ?
when i use custom renderer, zeroPadLength not working.
<Countdown date={Date.now() + 10000} intervalDelay={0} precision={3} zeroPadLength="2" renderer={props => <pre>{JSON.stringify(props, null, 2)}</pre>} />
Hello! I've been trying to use this library to build a countdown timer, as it has good documentation, and looks cool.
I've been struggling to understand how to structure a React component that wraps the Countdown
component, so as to provide a method for controlling the timer, so I looked to the examples/
directory - and this file looked like the right thing.
I'm pretty new to React, and don't yet know the idioms and patterns, and this is also in Typescript - which I'm not familiar with, so eventually I checked out the repo and tried to run the examples to see if I could figure it out.
However, I get this error message after yarn install && yarn start
:
Failed to compile.
/Users/miketheman/workspace/other/react-countdown/examples/node_modules/@types/react-dom/node_modules/@types/react/index.d.ts
Type error: Duplicate identifier 'LibraryManagedAttributes'. TS2300
2665 | // We can't recurse forever because `type` can't be self-referential;
2666 | // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa
> 2667 | type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
| ^
2668 | ? T extends React.MemoExoticComponent<infer U> | React.LazyExoticComponent<infer U>
2669 | ? ReactManagedAttributes<U, P>
2670 | : ReactManagedAttributes<T, P>
I was wondering if you had seen this before, or had any idea how this might be happening?
$ which node
/usr/local/bin/node
$ node --version
v11.14.0
$ which yarn
/usr/local/bin/yarn
$ yarn --version
1.15.2
I use custom render Like this
<Countdown date={Date.now() + 10000} zeroPadTime={2} renderer={renderer} />
But i take 0:0:0 format
How can i use it?
Currently I am simply pausing the timer (assuming it has not finished), however I wonder if this cleans up all resources sufficiently?
This issue is probably related to hooks but here goes:
My countdown is set to autostart false and to run for 60 seconds, when I start the timer, I first reset the date and key prop, otherwise the countdown would start running with the already passed seconds (e.g. if I wait 3 seconds before starting the countdown, the countdown would start at 0:57 instead of 1:00).
The parent component sets the "startTimer" prop to true, which in return sets autoStart to true as well:
useEffect(() => {
let newCountdown = Date.now() + durationInSeconds * 1000;
setCountdownKey(newCountdown);
setCountdownDate(newCountdown);
}, [startTimer]);
.
.
.
<Countdown
key={countdownKey}
date={countdownDate}
autoStart={startTimer}
renderer={({ minutes, seconds }) => (
<span>
{minutes}:{zeroPad(seconds)}
</span>
)}
/>
The only issue I have right now is, once I start the countdown, it first jumps to the time passed (the same as described above with e.g. waiting 3 seconds, jumping to 0:57) and then resets correctly to 1:00 and goes down from there.
Is there a reason for the time jump with autostart false or am I not properly resetting the date and key before starting?
import React from "react";
import ReactDOM from "react-dom";
import Countdown from "react-countdown-now";
const renderer = props => {
return (
<span>
{props.minutes}:{props.seconds}</span>
);
};
ReactDOM.render(
<Countdown date={Date.now() + 10000} renderer={renderer}/>,
document.getElementById("root")
);
Displays the countdown as 0:9
. Would love it to look like 00:09
@Jravvit mentioned in #35 that he managed to solve it by using props.formatted.minutes
etc. But The props in the code I posted above does not have formatted field.
It looks like the default zeroPadTime format - 00:00:00:00 breaks when you use a custom date.
My code:
const renderer = ({ days, hours, minutes, seconds, completed }) => {
if (completed) {
// Render a completed state
return <Completionist />;
} else {
// Render a countdown
return <div className="countdown-layout"><span><div className="days">{days}</div> <div className="hours">{hours}</div>:<div className="minutes">{minutes}</div>:<div className="seconds">{seconds}</div></span></div>;
}
};
<Countdown
date={new Date(1556377200000)}
renderer={renderer}
/>
Renders as: 53 0:1:17
Would like it to be: 53 00:01:17
When using countdown, zeroPadLength
is not applied for days as it's described in
This option defaults to 2 in order to display the common format 00:00:00 instead of 0:0:0. If the value is higher than 2, only the hour part (never days) will be zero-padded while it stays at 2 for minutes as well as seconds.
In my case, in order to pad days as well I had to do:
const renderer = ({
days, hours, minutes, seconds,
}) => (
<span>
{zeroPad(days, 2)}:{zeroPad(hours, 2)}:{zeroPad(minutes, 2)}:{zeroPad(seconds, 2)}
</span>
);
It would be great if we had a param for applying zeroPad in days as well, instead of having to define a renderer function just for that.
Hello, awesome job with building this nice component, I have an issue however. When I set controlled prop to true it stops the timer. Probably it's supposed to work like that, but in that case would you be able to give me an example of how the function that sets the date prop should look like? Thanks in advance.
The following code is presenting the countdown without the stylization.
<Countdown className="countdown"
date={Date.now() + 13000}
daysInHours
style={{color: 'red', fontWeight: 'bold',}}
\>
I have a usecase where i want to use countdown timer and stopwatch timer in different cases.
Let me know if it is possible with this.
i have the example of the custom renderer but the zeroPadTime is showing this format 0:0:0 while i needed to be like the following 00:00:00
const renderer = ({ hours, minutes, seconds, completed }) => {
if (completed) {
// Render a complete state
return <Completionist />;
} else {
// Render a countdown
return (
<span>
{hours}:{minutes}:{seconds}
</span>
);
}
};
Your help will be highly appreciated!!!!
This component is awesome. I am using date property as a enddate and Now property function which returns current date and time as per documentation. However time is not ticking down if i custom now function.
But if i use default Date.now() inside now function, Countdown start ticks...
Hi! I've been trying to create multiple instances of countdown components in a JSX array, and I noticed that all of the rendered countdowns share the same expiration date, even if it is originally different for each one. That expiration date is every time the one of the last component in the array.
This is how I'm rendering the countdowns:
for (var auction in auctions) {
auctionItems.push(
<AuctionItem key={auction} auction={auctions[auction]}>
<Countdown key={auction} date={auctions[auction].expiration_date * 1000} renderer={renderer} />
</AuctionItem>);
}
Any ideas of what could be going wrong?
Hi, I am trying to use Countdown component with autoStart set to false. I added button with onClick handler to trigger start function via refs. If event handler only contains call to start timer function, everything seem to work just fine, however if I add more logic to event handler and lets say I use this.setState({})
to modify some of my states, it starts to behave unexpectedly (countdown starts at greater time when initially set to, also it resets every time I invoke start function).
Sample code: https://codesandbox.io/s/m3nwrlw539
i have a component which shows an expiring token and once expired, a button is clicked to reset the expiry which resets with a new token and a new expiry time. the newer time gets passed and updates but the count down renders only the first time. i have to keep re-rendering the element to see the change in the timer's state else the countdown is stuck. if i refresh the page it works fine. do i need to restart a flag to restart its internal setTimeout or so?
thanks
Any hacks or methods to achieve this?
It would be great is besides the functions pause()
and start()
that the counter provides, you could also provide a toggle()
function. It will be detail of luxury.
I have a countdown that refresh a page when it's completed.
Some time before that, I show a modal.
When the modal is shown, the countdown starts again, making the refresh never happening.
Here's some parts of the code :
render() {
const renderer = ({ hours, minutes, seconds, completed }) => {
console.log('test : ' + seconds);
return true;
};
return (
<Countdown
date={Date.now() + 15000}
renderer={renderer}
onTick={({ hours, minutes, seconds, completed }) => {
if (seconds === 10) {
this.showModal();
}
}}
onComplete={() => window.location.reload()}
/>
);
}
Any idea?
I know that component rerenders naturally on state change but it's really frustrating for Countdown.
Look at the demo i made: https://codesandbox.io/s/lingering-night-sn8jd
Easy way to fix it is to memo the Countdown component itself but combined with forwardRef it totally crashes for me.
Any workarounds?
Hello. I used your package and got a warning
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
index.js:2177
Please check the code for the Countdown component.
My usage
<Countdown
date={Date.now() + 5000}
renderer={this.renderer}
onComplete={this.redirectToLogin}
/>
renderer({ seconds }) {
return <span>{seconds}</span>;
}
redirectToLogin() {
this.props.history.push('/Login');
}
Warning shows after execution of redirectTo Login func.
"react": "^16.0.0"
Hi there, I believe that this package is currently missing a String.prototype.repeat
polyfill which causes it to fail on IE11 or lower.
Hi,
I'm using a where I have both a custom renderer and a onComplete
callback as seen bellow:
<Countdown
date={Date.now() + 5000}
renderer={this.renderCountdown}
onComplete={() => {
this.setState({ isAvailable: true });
}}
renderCountdown({ hours, minutes, seconds, completed }) {
if (completed) {
// Render a complete state
return (
<div className="countdown">
Available <span>now!</span>
</div>
);
} else {
// Render a countdown
return (
<div className="countdown">
Available in
<span className="clock">
{hours} hours {minutes} minutes {seconds} seconds
</span>
</div>
);
}
}
The reason I have it like this is because I have other child components that need from that isAvailable
state property, but with this combination at the end of the countdown the custom renderer will not enter the completed
verification, instead will always show the clock stopped at the initial start time.
Thanks so much for any help and the super useful component!
Years would have been great. That's the only reason I can't use that one.
When doing npm run build I have this error.
npm start works just fine.
Failed to minify the code from this file:
./node_modules/react-countdown-now/dist/index.es.js:4
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.