The demo link is redirecting me to a broken url

Hello,

Can I show clock that ticking={true} every interval={1000} to start from the server time?
Passing date={new Date} is not solving the issue, nor ticking after set.

Regards

This is my render function:

render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello World!
          <Clock format={'HH:mm:ss'} ticking={true} timezone={'US/Pacific'} />
        </Text>
        
      </View>
    );
  }

There is an error coming up:

Invariant Violation: Text strings must be rendered within a component.

Moving outside and even doesn't fix the problem.

I'm passing in a date that I'm basing on a gmtDifference value I have access to.

If I don't pass in a date and use ticking={true} I get the desired effect: the time is the current date and the ticking happens once per second.

If I DO pass in a date and use ticking={true}, I get no ticking effect.

+ [email protected] added 666 packages from 278 contributors, removed 323 packages, updated 1273 packages, moved 4 packages and audited 36269 packages in 95.208s found 63 low severity vulnerabilities run npm audit fixto fix them, ornpm audit for details

Can the peer dependency be upgraded for react 16?

Could you add a boolean property blink that controls if the colon blinks every half interval?

If blink==false, then this component works like without this feature.
If blink==true, and assume interval==1000, then the colon would toggle every interval/2 millisecond:

For example current time is 10:24:33

PS: If the output time format is HH:MM, then blink that colon instead.

Hi there! I've been using this as a small clock in my table table toolbar in my SPA app. However, when I navigate away from the page that this lib is mounted on, I receive the following warning:

I'd be happy to provide any other information or even a small repro, just let me know.

Tried the following implementation with version 3.1.0 and I am getting no console log from onChange function.

import React from "react"
import ReactDOM from "react-dom"
import Clock from "react-live-clock"

import "./styles.css"

console.log("test")

function App() {
  return (
    <div className="App">
      <Clock
        format={"HH:mm:ss"}
        ticking={true}
        onChange={() => console.log("tick")}
      />
    </div>
  )
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)

Nothing in console. You can view and modify in codesandbox here: https://codesandbox.io/s/880zo5v9ml

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in ReactLiveClock (at TimeBox/index.tsx:20)

<Clock format={"h:mm:ssa"} style={{ fontSize: "24px", color: "green" }} ticking={true} />
I just updated the version and the inline CSS stops working.

<Clock format={"h:mm:ssa"} ticking={true} className="bigclock" />

I also tried this and also didn't work.

Is there any examples how to make it work?

Thanks for your help.

Is there any trick to this?

./node_modules/react-live-clock/lib/Component.js
Module not found: Can't resolve 'react-moment' in '/Users/nolan/clock/node_modules/react-live-clock/lib'

I'm following documentation/ youtube and seem to keep runing into this...

Clock is not recalculate to new Time Zone after propery timeZone is change dynamically.

Example:

locale = 'Australia/Sydney'
after oneMinute i am setting new TimeZone:

locale = 'Europe/London'

but the Clock component not changing the time based on the new zone.

<Clock className="world_clock__item" format={format} ticking={true} timezone={locale}/>

Hello,
i m getting below error though timezone is installed
/node_modules/react-live-clock/lib/Component.js
Module not found: Can't resolve 'moment-timezone' in 'D:\testmode\node_modules\react-live-clock\lib'

ReactLiveClock.render
node_modules/react-live-clock/lib/Component.js:76
73 | var localizedTime = (0, _moment2.default)(dateValue);
74 |
75 | if (timezone) {

76 | localizedTime.tz(timezone);
77 | }
78 |
79 | var formattedTime = localizedTime.format(format);

I'm using this component inside of a ReactFitText component and as it doesnt appear to render anything on the first pass, the text isn't fitted (resized). Here's a section of my code with the workaround:

  public componentDidMount() {
    this.forceUpdate(); // Hack because text doesn't appear fitted on first render.
  }

  public render() {
    return (
      <Widget options={this.props.options}>
        <div role="presentation" className={s.root}>
          <ReactFitText compressor={0.3}>
            <h1 className={s.text}>
              <Clock format="HH:mm" ticking interval={1000} />
            </h1>
          </ReactFitText>
        </div>
      </Widget>
    );
  }

in case of using this module with VITE

react-dom.development.js:26591 Uncaught TypeError: Cannot set properties of undefined (setting 'format')
at F (:3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:415:32)
at Object.l (:3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:432:46)
at Object. (:3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:433:62)
at n (:3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:28:24)
at Module. (:3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:440:9)
at n (:3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:28:24)
at :3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:55:22
at :3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:56:8
at :3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:20:82
at node_modules/react-moment/dist/index.js (:3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:21:6)
at __require2 (:3000/node_modules/.vite/chunk-VNVKLEIO.js?v=b732fa8d:45:44)
at node_modules/react-live-clock/lib/Component.js (:3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:2034:24)
at __require2 (:3000/node_modules/.vite/chunk-VNVKLEIO.js?v=b732fa8d:45:44)
at node_modules/react-live-clock/lib/index.js (:3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:2146:26)
at __require2 (:3000/node_modules/.vite/chunk-VNVKLEIO.js?v=b732fa8d:45:44)
at :3000/node_modules/.vite/react-live-clock.js?v=b732fa8d:2152:32

Is it possible to change the timezone? I tried to use a state-variable but the clock does not update on timezone changes. The following however seems to work:

<Clock key={clockTimezone} format={"HH:mm:ss"} ticking={true} timezone={clockTimezone} />

Unfortunately I receive the following error message in console:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function

Right now the time interval is 1 second. But if we refresh it based on the smallest time unit in passed format e.g. for "hh:mm" if we refresh every minute or less we can reduce frequency of dom update.

I'm trying to set another language on the component to set the day and Month on the right language.

Here's what I'm trying:

<Clock format={'ddd DD MMMM'} ticking={true} locale={'es'}/>

I hope someone can help me on seeing my mistake

I have error that happening only in production.

Operation systems difference:

dev - windows.
production - linux.

tnx for any help

EDIT:

Solved by downgrade react-live-clock to version 4.0.5.

react-live-clock version 5.0.13 have a dependency on "react-moment": "^1.1.1"

and this one make it not working on produciton.
its a bug.

How to use moment.js filter function on output ?

Thanks for your work btw!

component page

import React  from 'react';
import Clock from 'react-live-clock';

export default class Mytime extends React.Component {
    render() {
        return(
        <Clock format={'HH:mm A'} ticking={true} timezone={'Asia/Bangkok'}  />
        )
    }
}

main page

var des2 ={
  color: 'white',
  marginLeft: '10px'

}
<Mytime style={des2}  />

Tested in both desktop and Android device, worked but when access it using my iPhone, shows invalid date instead.

Any workaround?

The default clock is in EN format.
Is there a way with moment to change the locale?

Thanks!

Is there a way to make it from 24 hour time to 12 hour format
Thank you

I'm currently using version ^6.0.0 along with "moment-timezone": "^0.5.34" and "react-moment": "^1.1.2"

When setting the timezone property like this
<Clock format="HH:MM" timezone="US/Pacific" ticking />

it still shows my local time and I'm in the UK. I've tried a number of different timezones and none of them are loading with the specified timezomes.

The README speaks of a filter prop but I checked the source code and it doesn't even seem to exist?

The current date is not being honored and seems to be fixed at November 11, 2021. See https://codesandbox.io/s/react-live-clock-date-bug-xwd5w as an example.

I need to output Qua, 5 Mai, 2021, based on my timeZone location (BR)
But it's showing Wed, May 5th, 2021, do this library don't change the location for days/months?
using 'ddd, MMMM Mo, YYYY' and
'America/Belem' timeZone

For manual shifting the hours

like

<Clock shift={-2} />

I added the clock to my next.js app, but in the console I get an error.

the error is like this

Warning: Prop `dateTime` did not match. Server: "1653171979698" Client: "1653171980060"
   at time
   at n (webpack-internal:///./node_modules/react-moment/dist/index.js:11:16590)
   at ReactLiveClock (webpack-internal:///./node_modules/react-live-clock/lib/Component.js:30:24)
   at div
   at TimeZone

My component looks like this:

   <Clock
        format={"h:mm A"}
        timezone={"Europe/Stockholm"}
        className="text-white text-2xl underline"
        ticking={true}

      />

Any ideas what's up?

While the blinking property currently works fine if the format only has a single colon, e.g. 'h:mm a', when the format contains multiple colons, e.g. 'h:mm:ss a', only the last one blinks.
Is there a reason not all colons should be set to blink?

Further, is there a reason this property is not currently documented in the readme?

In the production version, the package weighs 451 KiB

Error message :
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

how can i fix this problem?

Nice utility, thanks.

In your documentation, I believe you mean Do where you have Mo.

<Clock
date={'1997-12-31T14:15:23+01:00'}
format={'dddd, MMMM Mo, YYYY, h:mm:ss A'} />

Mo is producing the month, whereas Do would produce the day.

Hi,

This is a wonderful plugin.
I have used this. It works well except when I click the back button on the browser, it will throw this:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in ReactLiveClock

I am using Class component. May I know how to fix this?

Thank you.

npm WARN [email protected] requires a peer of moment@^2.29.1 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of moment-timezone@^0.5.33 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of react@^16.13.1 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

Dependencies are not installed directly with the library? Also the react version is old.

No install posible with react v18

Hi,

if you change moments locale globally on the fly (moment.locale('de')), Clock is not changing it's format.

So if you use a format like 'ddd DD. MMMM, HH:mm', the format stays on the locale initially loaded.

Thanks
Chris

After updating my package.json to the latest versions, I am not getting the below Error.

s.tz is not a function
./node_modules/react-moment/dist/index.js:11

"react": "^18.1.0",
"react-live-clock": "^5.7.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.34",
"react-moment": "^1.1.2",

Is anyone else having a similar issue?

Getting the error

./node_modules/react-live-clock/lib/Component.js
Module not found: Can't resolve 'moment-timezone' in '[...]/node_modules/react-live-clock/lib'

with

"react-live-clock": "^5.0.9",

component page

export default class Mytime extends React.Component {
    render() {
        return(
        <Clock format={'HH:mm A'} ticking={true} timezone={'Asia/Bangkok'}  />
        )
    }
}

main page

var des2 ={
  color: 'white',
  marginLeft: '10px'

}

<Mytime style={des2} />

i used this (react-live-clock) component inside my home.js component of App.js, but when i change route, react throws and error about react update of unmount component.
to solve it i tried using useEffect hook:

const [timeclock , settimeclock] = useState([]); 
   
    useEffect(() => {
        time();
        
},[]);
const time = async ()=> {
    
    const data =  (<Clock  format={'HH:mm:ss A'} ticking={true} timezone={'America/Toronto'} />)
    
    settimeclock(data);
    
}

but still this throws error

Thanks for this great utility!

I was wondering if along with the onChange function there could also be an onReady, that triggers as soon as the clock starts running.

Right now if I set the interval to one minute, the first onChange runs one minute after the component renders. But it'd be great to have an "instant" callback.

Thanks!

The code is like this.

<Clock format="HH:mm:ss" ticking={true} className="classForClock" />

It works with JSX, but it will cause error TS2769 (No overload matches this call) in typescript.

I think className is not defined in index.d.ts. While I add readonly className?: string; like below it might work well.

interface Props {
  readonly children?: string;
  readonly date?: number | string;
  readonly format?: string;
  readonly interval?: number;
  readonly ticking?: boolean;
  readonly timezone?: string;
  readonly filter?: () => void;
  readonly onChange?: () => void;
  readonly className?: string;
}