Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
react-clock
Advanced tools
An analog clock for your React app.
npm install react-clock
or yarn add react-clock
.import Clock from 'react-clock'
.<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 |
|
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 |
FAQs
An analog clock for your React app.
The npm package react-clock receives a total of 102,157 weekly downloads. As such, react-clock popularity was classified as popular.
We found that react-clock demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.