react-live-clock
React clock with time-zones
DEMO
Installation
NPM
npm install --save react react-live-clock
Don't forget to manually install peer dependencies (react
) if you use npm@3.
Demo
http://pvoznyuk.github.io/react-live-clock
Usage
import React from 'react';
import Clock from 'react-live-clock';
exports default class MyComponent extends React.Component {
render() {
<Clock format={'HH:mm:ss'} ticking={true} timezone={'US/Pacific'} />
}
}
Outputs:
<time>10:15:34</time>
** Shows current time for 'US/Pacific' timezone and updates every second
Formatting
you can use any formatting from moment.js date library
Properties
Property | Type | Default Value | Description |
---|
date | timestamp or string | current date | Date to output, If nothing is set then it take current date. |
format | string | 'HH:MM' | Formatting from moment.js library. |
locale | string | null | Changes the language of the component via prop |
filter | function | (date: String) => date | Filtering the value before the output . |
timezone | string | null | If timezone is set, the date is show in this timezone. You can find the list. here, the TZ column. |
ticking | boolean | false | If you want the clock to be auto-updated every interval seconds. |
blinking | boolean, string | false | If you want the clock's last colon to blink. Set it to all to make them all blink. |
noSsr | boolean | false | Makes the component not render on the server to fix mismatch. |
interval | integer | 1000 | Auto-updating period for the clock. 1 second is a default value. |
className | string | null | Extra class. |
style | CSSProperties | null | CSSProperties Customized inline style . |
children | string | null | date can be set as a children prop. |
onChange | function | ({output, previousOutput, moment}) => {} | callback function on each output update |
Development and testing
Currently is being developed and tested with the latest stable Node 7
on OSX
and Windows
.
To run example covering all ReactLiveClock
features, use npm start dev
, which will compile src/example/Example.js
git clone git@github.com:pvoznyuk/react-live-clock.git
cd react-live-clock
npm install
npm start dev
open http://localhost:8080
Tests
npm start test
npm start test.cov
npm start test.e2e
License
This software is released under the MIT license. See LICENSE for more details.
Contributors
[6.1.14]
Bump eslint from 8.35.0 to 8.42.0 (#253, #256, #257, #263)
Bump react-router-dom from 6.8.2 to 6.13.0 (#254, #266)
Bump moment-timezone from 0.5.41 to 0.5.43 (#255)