Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pvoznyuk/react-live-clock
React clock with time-zones
https://github.com/pvoznyuk/react-live-clock
clock date dateformat react time time-zones
Last synced: 6 days ago
JSON representation
React clock with time-zones
- Host: GitHub
- URL: https://github.com/pvoznyuk/react-live-clock
- Owner: pvoznyuk
- License: mit
- Created: 2017-05-30T14:07:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-12T07:06:17.000Z (about 2 months ago)
- Last Synced: 2024-12-21T07:03:03.314Z (13 days ago)
- Topics: clock, date, dateformat, react, time, time-zones
- Language: JavaScript
- Size: 10.1 MB
- Stars: 152
- Watchers: 4
- Forks: 25
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-live-clock [](https://www.npmjs.com/package/react-live-clock)
[](https://gitter.im/pvoznyuk/help)
[](https://david-dm.org/pvoznyuk/react-live-clock)
[](https://david-dm.org/pvoznyuk/react-live-clock#info=devDependencies)
React clock with time-zones
[DEMO](https://pvoznyuk.github.io/react-live-clock/)
## Installation
### NPM
```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](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
### React Native
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.```
### Formatting
you can use any formatting from [moment.js](https://momentjs.com/docs/#/displaying/format/) 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](https://momentjs.com/docs/#/displaying/format/) 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](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones), 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`
```bash
git clone [email protected]:pvoznyuk/react-live-clock.git
cd react-live-clock
npm install
npm start dev
# then
open http://localhost:8080
```
## Tests
```bash
# 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](https://github.com/pvoznyuk)
* [anthony0030](https://github.com/anthony0030)