An analog clock for your React app.
- Install by executing
npm install react-clockoryarn add react-clock. - Import by adding
import Clock from 'react-clock'. - Use by adding
<Clock />.
A minimal demo page can be found in sample directory.
Online demo is also available!
Add react-clock to your project by executing npm install react-clock or yarn add react-clock.
Here's an example of basic usage:
import { 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 ( <div> <p>Current time:</p> <Clock value={value} /> </div> ); }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';Displays a complete clock.
| Prop name | Description | Default value | Example values |
|---|---|---|---|
| className | Class name(s) that will be added along with "react-clock" to the main react-clock <time> element. | n/a |
|
| data-testid | The test ID used for testing purposes. | n/a | 'clock' |
| formatHour | Function called to override default formatting of hour marks. Can be used to use your own formatting function. | (default formatter) | (locale, hour) => formatHour(hour, 'HH') |
| 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 |
| locale | Locale that should be used by the clock. Can be any IETF language tag. Note: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/User's browser settings | "hu-HU" |
| 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 (e.g. 200) or as string (e.g. "50vw"). | 150 |
|
| useMillisecondPrecision | Whether to use millisecond precision. | false | true |
| value | Clock value. Must be provided. | n/a | Date: new Date() |
The MIT License.
 | Wojciech Maj |