react-live-clock

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 [e-mail]: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

Changelog

[6.1.16]

now was a number not a date object. #283 (updates typescript definition) Bump eslint from 8.47.0 to 8.49.0 #286 Adds 'use client' Directive to component #284