1.1.3 • Published 2 years ago

react-simple-clock v1.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

PropertyTypeDefault ValueDescription
hourValuenumbernullThe hour to show as output. No need to use if you want to show a live clock.
minuteValuenumbernullThe minute to show as output. No need to use if you want to show a live clock.
sizenumber200Size of the clock in px.
hourMarkFormatstringnullIn which formate the hour marks to be displayed. If you want to display number then use number or use roman to show roman.
classNamestringnullYour customized styled class name. Try to use it for background-color, border-color, background-width etc.
livebooleanfalseIf true then a live clock with current time & second hand is displayed.
modestringlightIf 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

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago