Need help with react-clock?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

wojtekmaj
145 Stars 21 Forks MIT License 202 Commits 2 Opened issues

Description

An analog clock for your React app.

Services available

!
?

Need anything else?

Contributors list

# 8,023
JavaScr...
reddit
React
Less
182 commits
# 27,804
ls
gh-page...
Chrome
React
5 commits
# 126,842
Webpack
CSS
React
HTML
3 commits

npm downloads CI dependencies dev dependencies tested with jest

React-Clock

An analog clock for your React app.

tl;dr

  • Install by executing
    npm install react-clock
    or
    yarn add react-clock
    .
  • Import by adding
    import Clock from 'react-clock'
    .
  • Use by adding
    .

Demo

A minimal demo page can be found in

sample
directory.

Online demo is also available!

Installation

Add React-Clock to your project by executing

npm install react-clock
or
yarn add react-clock
.

Usage

Here's an example of basic usage:

import React, { useEffect, useState } from 'react';
import Clock from 'react-clock';

function MyApp() { const [value, setValue] = useState(new Date());

useEffect(() => { const interval = setInterval( () => setValue(new Date()), 1000 );

return () => {
  clearInterval(interval);
}

}, []);

return (

Current time:

) }

Custom styling

If you want to use default React-Clock styling to build upon it, you can import React-Clock's styles by using:

import 'react-clock/dist/Clock.css';

User guide

Clock

Displays a complete clock.

Props

|Prop name|Description|Default value|Example values| |----|----|----|----| |className|Class name(s) that will be added along with

"react-clock"
to the main React-Clock
element.|n/a|
  • String:
    "class1 class2"
  • Array of strings:
    ["class1", "class2 class3"]
| |hourHandLength|Hour hand length, in %.|
50
|
80
| |hourHandOppositeLength|The length of the part of an hour hand on the opposite side the hand is pointing to, in %.|
10
|
20
| |hourHandWidth|Hour hand width, in pixels.|
4
|
3
| |hourMarksLength|Hour marks length, in %.|
10
|
8
| |hourMarksWidth|Hour marks width, in pixels.|
3
|
2
| |minuteHandLength|Minute hand length, in %.|
70
|
80
| |minuteHandOppositeLength|The length of the part of a minute hand on the opposite side the hand is pointing to, in %.|
10
|
20
| |minuteHandWidth|Minute hand width, in pixels.|
2
|
3
| |minuteMarksLength|Minute marks length, in %.|
6
|
8
| |minuteMarksWidth|Minute marks width, in pixels.|
1
|
2
| |renderHourMarks|Whether hour marks shall be rendered.|
true
|
false
| |renderMinuteHand|Whether minute hand shall be rendered.|
true
|
false
| |renderMinuteMarks|Whether minute marks shall be rendered.|
true
|
false
| |renderNumbers|Whether numbers shall be rendered.|
false
|
true
| |renderSecondHand|Whether second hand shall be rendered.|
true
|
false
| |secondHandLength|Second hand length, in %.|
90
|
80
| |secondHandOppositeLength|The length of the part of a second hand on the opposite side the hand is pointing to, in %.|
10
|
20
| |secondHandWidth|Second hand width, in pixels.|
1
|
2
| |size|Clock size, in pixels.|
150
|
250
| |value|Clock value. Must be provided.|n/a|Date:
new Date()
|

License

The MIT License.

Author

Wojciech Maj
[email protected]
http://wojtekmaj.pl

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.