Skip to content
React clock with time-zones
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build v3.0.0 (#19) Nov 3, 2018
example v3.0.0 (#19) Nov 3, 2018
lib v3.0.0 (#19) Nov 3, 2018
src v3.1.0 Feb 23, 2019
test-e2e chore(app): base structure May 30, 2017
test fix(tests): update component name May 30, 2017
.babelrc feat(release): files May 31, 2017
.editorconfig feat(release): files May 31, 2017
.eslintignore chore(app): base structure May 30, 2017
.eslintrc feat(release): files May 31, 2017
.gitignore chore(app): biult files May 31, 2017
.npmignore doc(readme): props Jun 1, 2017
.npmrc chore(app): base structure May 30, 2017
.nvmrc
LICENSE feat(release): files May 31, 2017
README.md fixup: typo (#24) Apr 15, 2019
_config.yml Set theme jekyll-theme-cayman May 31, 2017
appveyor.yml feat(release): files May 31, 2017
bower.json app(example): improve examples Jun 1, 2017
circle.yml feat(release): files May 31, 2017
cli.js doc(readme): add demo link May 31, 2017
index.html chore(app): biult files May 31, 2017
nightwatch.json chore(app): base structure May 30, 2017
package-scripts.js fix(publish) May 31, 2017
package.json v3.1.0 Feb 23, 2019
webpack.config.js feat(release): files May 31, 2017
yarn.lock v3.1.0 Feb 23, 2019

README.md

react-live-clock npm

Gitter Dependencies Dev Dependencies

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 updats every second

Formatting

you can use any formatting from moment.js date library

Properties

Propertie Type Default Value Description
date timestamp or string currrent date Date to output, If nothing is set then it take current date.
format string 'HH:MM' Formatting from moment.js library.
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.
interval integer 1000 Auto-updating period for the clock. 1 second is a default value.
className string null Extra class.
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

# then
open http://localhost:8080

Tests

# to run tests
npm start test

# to generate test coverage (./reports/coverage)
npm start test.cov

# to run end-to-end tests
npm start test.e2e

License

This software is released under the MIT license. See LICENSE for more details.

Contributors

You can’t perform that action at this time.