react-simple-clock

This repository contains simple analog clock to be used in React applications. You can either use the live clock or set
your given time to see a stationary clock.

Installation

NPM

npm install react-simple-clock

Usage

Fixed clock with provided time

import React from 'react'
import Clock from 'react-simple-clock'

const MyApp = () => <Clock hourValue={2} minuteValue={20} />

export default MyApp

screenshot 1

Live styled clock with number marked hour

import React from 'react'
import Clock from 'react-simple-clock'

const MyApp = () => <Clock live={true} hourMarkFormat="number" className="your-class" />

export default MyApp

.your-class {
	border-width: 5px !important;
	border-color: rgb(6, 100, 240) !important;
	background-color: rgba(212, 242, 251, 0.753);
}

screenshot 2

Live styled clock in dark mode

import React from 'react'
import Clock from 'react-simple-clock'

const MyApp = () => <Clock live={true} hourMarkFormat="number" className="your-class" mode="dark" />

export default MyApp

.your-class {
	border-width: 5px !important;
	border-color: rgb(0, 10, 25) !important;
	background-color: rgba(2, 12, 15, 0.753);
}

screenshot 3

Properties

Property Type Default Value Description
hourValue number null The hour to show as output. No need to use if you want to show a live clock.
minuteValue number null The minute to show as output. No need to use if you want to show a live clock.
size number 200 Size of the clock in px.
hourMarkFormat string null In which formate the hour marks to be displayed. If you want to display number then use number or use roman to show roman.
className string null Your customized styled class name. Try to use it for background-color, border-color, background-width etc.
live boolean false If true then a live clock with current time & second hand is displayed.
mode string light If the mode is light then the theme is a light mode one otherwise use dark to display a dark theme.

To run in development

npm run dev

To run tests

npm test

or

npm run watch

License

MIT © alim1496

GitHub

View Github