React Live Clock
npm install react-live-clock


React clock with time-zones
DEMO
sh
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
`js
import React from 'react';
import Clock from 'react-live-clock';exports default class MyComponent extends React.Component {
render() {
}
}
`Outputs:
`html
` ** Shows current time for 'US/Pacific' timezone and updates every second
$3
React Native requires that you wrap text in a
`` like this:
`JSX
import { Text, View } from "react-native";
import Clock from "react-live-clock";export default function ClockPage() {
return (
Clock page
);
}
`
If you don't you will get the error `Invariant Violation: Text strings must be rendered within a component. `$3
you can use any formatting from moment.js date library
$3
| 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 updateDevelopment 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`bash
git clone git@github.com:pvoznyuk/react-live-clock.git
cd react-live-clock
npm install
npm start devthen
open http://localhost:8080
`Tests
`bash
to run tests
npm start testto generate test coverage (./reports/coverage)
npm start test.covto run end-to-end tests
npm start test.e2e
``