react-simple-clock

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

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);
}

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);
}

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