react-live-clock-date-fns

Simple live clock component using date-fns

Usage no npm install needed!

<script type="module">
  import reactLiveClockDateFns from 'https://cdn.skypack.dev/react-live-clock-date-fns';
</script>

README

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