react-live-clock-date-fns

Installation

NPM

npm install --save react react-live-clock-date-fns

Usage

import React  from 'react';
import Clock from 'react-live-clock-date-fns';

exports default function MyComponent() {
    return <Clock />
}

Outputs:

<time>10:15:34</time>

** Shows current time using new Date() constructor and updates every second

Formatting

you can use any formatting from date-fns date library

Properties

| Propertie | Type | Default Value | Description | |------------|---------------------|---------------|-------------| | format | string | 'h:mm:ss a, MMMM do yyyy' | Formatting from date-fns library. | interval | integer | 1000 | Auto-updating period for the clock. 1 second is a default value. | className| string | null | Extra class. | style| object | null | Extra styles.

Development and testing

Currently is being developed and tested with the latest stable Node 14 on Linux.

To run example, useyarn start, which will start development project

git clone https://github.com/SandunRathsara/react-live-clock-date-fns.git
cd react-live-clock-date-fns
yarn install
yarn start

# then
open http://localhost:3000

License

This software is released under the MIT license. See LICENSE for more details.

Contributors

• SandunRathsara