1.0.1 • Published 2 years ago

react-clock-correct-locale v1.0.1

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

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 <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 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 (
    <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/aString: "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.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.150250
valueClock value. Must be provided.n/aDate: new Date()

License

The MIT License.

Author