Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-clock

Package Overview
Dependencies
Maintainers
0
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-clock

An analog clock for your React app.

  • 5.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
129K
decreased by-6.86%
Maintainers
0
Weekly downloads
 
Created
Source

npm downloads CI

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 <Clock />.

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

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 nameDescriptionDefault valueExample values
classNameClass name(s) that will be added along with "react-clock" to the main react-clock <time> element.n/a
  • String: "class1 class2"
  • Array of strings: ["class1", "class2 class3"]
formatHourFunction called to override default formatting of hour marks. Can be used to use your own formatting function.(default formatter)(locale, hour) => formatHour(hour, 'HH')
hourHandLengthHour hand length, in %.5080
hourHandOppositeLengthThe length of the part of an hour hand on the opposite side the hand is pointing to, in %.1020
hourHandWidthHour hand width, in pixels.43
hourMarksLengthHour marks length, in %.108
hourMarksWidthHour marks width, in pixels.32
localeLocale 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"
minuteHandLengthMinute hand length, in %.7080
minuteHandOppositeLengthThe length of the part of a minute hand on the opposite side the hand is pointing to, in %.1020
minuteHandWidthMinute hand width, in pixels.23
minuteMarksLengthMinute marks length, in %.68
minuteMarksWidthMinute marks width, in pixels.12
renderHourMarksWhether hour marks shall be rendered.truefalse
renderMinuteHandWhether minute hand shall be rendered.truefalse
renderMinuteMarksWhether minute marks shall be rendered.truefalse
renderNumbersWhether numbers shall be rendered.falsetrue
renderSecondHandWhether second hand shall be rendered.truefalse
secondHandLengthSecond hand length, in %.9080
secondHandOppositeLengthThe length of the part of a second hand on the opposite side the hand is pointing to, in %.1020
secondHandWidthSecond hand width, in pixels.12
sizeClock size, in pixels (e.g. 200) or as string (e.g. "50vw").150
  • Number: 250
  • String: "50vw"
useMillisecondPrecisionWhether to use millisecond precision.falsetrue
valueClock value. Must be provided.n/aDate: new Date()

License

The MIT License.

Author

Wojciech Maj Wojciech Maj

Keywords

FAQs

Package last updated on 24 Oct 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc