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

React Native

React Native requires that you wrap text in a <Text> like this:

import { Text, View } from "react-native";
import Clock from "react-live-clock";

export default function ClockPage() {
  return (
    <View>
      <Text>Clock page</Text>
      <Clock element={Text} />
    </View>
  );
}

If you don't you will get the error Invariant Violation: Text strings must be rendered within a <Text> component.

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 [email protected]: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

• pvoznyuk
• anthony0030