react-clock
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-clock package

    3.0.0 • Public • Published

    npm downloads build 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 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
    • 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
    kontakt@wojtekmaj.pl
    http://wojtekmaj.pl

    Install

    npm i react-clock

    DownloadsWeekly Downloads

    57,233

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    55 kB

    Total Files

    35

    Last publish

    Collaborators

    • ryanburgess
    • wojtekmaj