Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-live-clock

Package Overview
Dependencies
Maintainers
2
Versions
92
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-live-clock

React Live Clock

  • 6.1.14
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
14K
decreased by-10.84%
Maintainers
2
Weekly downloads
 
Created
Source

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

Formatting

you can use any formatting from moment.js date library

Properties

PropertyTypeDefault ValueDescription
datetimestamp or stringcurrent dateDate to output, If nothing is set then it take current date.
formatstring'HH:MM'Formatting from moment.js library.
localestringnullChanges the language of the component via prop
filterfunction(date: String) => dateFiltering the value before the output .
timezonestringnullIf timezone is set, the date is show in this timezone. You can find the list. here, the TZ column.
tickingbooleanfalseIf you want the clock to be auto-updated every interval seconds.
blinkingboolean, stringfalseIf you want the clock's last colon to blink. Set it to all to make them all blink.
noSsrbooleanfalseMakes the component not render on the server to fix mismatch.
intervalinteger1000Auto-updating period for the clock. 1 second is a default value.
classNamestringnullExtra class.
styleCSSPropertiesnullCSSProperties Customized inline style .
childrenstringnulldate can be set as a children prop.
onChangefunction({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

Keywords

FAQs

Package last updated on 16 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc