Nuclear Planning Manual

    react-analogue-clock
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.2 • Public • Published

    AnalogueClock

    React Analogue Clock

    A customizable analogue clock built with styled-components in React

    GitHub issues devDependencies peerDependencies License


    Demo

    Online demo is available


    Installation

    $ yarn add styled-components react-analogue-clock

    or

    $ npm install --save styled-components react-analogue-clock

    Usage

    // code away!
     
    import AnalogueClock from 'react-analogue-clock';
     
     
    const clockOptions = {
        baseColor: '#ffffff',
        borderColor: '#000000',
        borderWidth: 5,
        centerColor: '#000000',
        handColors: {
            hour: '#000000',
            minute: '#000000',
            second: '#000000',
        },
        notchColor: '#000000',
        numbersColor: '#000000',
        showNumbers: true,
        size: 300
    }
     
    <AnalogueClock {...clockOptions} />

    or

    Test it out with Storybook

    $ yarn storybook

    Props

    • baseColor: [color]
      • Background color of the clock face.
    • borderColor: [color]
      • Color of the border.
    • borderWidth: [integer]
      • Width of the border. 0 will hide the border.
    • centerColor: [color]
      • Color of the center dot.
    • handColors: [object]
      • Color of each hand.
      • hour: [color]
        • Color ogf the hour hand.
      • minute: [color]
        • Color of the minute hand.
      • second: [color]
        • Color of the second hand.
    • notchColor: [color]
      • Color of the minute notches.
    • numberColor: [color]
      • Color of the hour numbers. (if enabled)
    • showNumbers: [boolean]
      • Toggle the hour numbers.
    • size: [integer]
      • Size of the clock face in pixels.

    color type defined by extra-prop-types


    Contributing

    To get started...

    Step 1

    • Option 1

      • 🍴 Fork this repo!
    • Option 2

      • 👯 Clone this repo to your local machine using https://github.com/brendon1555/react-analogue-clock.git

    Step 2

    • HACK AWAY! 🔨🔨🔨

    Step 3


    Contributors

    Brendon Lees
    Brendon1555
    github.com/brendon1555

    Support

    Reach out to me at one of the following places!


    License

    License

    Install

    npm i react-analogue-clock

    DownloadsWeekly Downloads

    287

    Version

    0.3.2

    License

    MIT

    Unpacked Size

    359 kB

    Total Files

    19

    Last publish

    Collaborators

    • brendon1555