Visit The Github Repo for instructions

Default (no props):

●

<AnalogClock />

Dark:

●

<AnalogClock 
        whiteNumbers 
        backgroundColor="black" 
        handBaseColor="white"
        handColor={{ 
          hour: "white", 
          minute: "white", 
          second: "tomato" 
        }} 
/>

Static with no second hand:

●

<AnalogClock 
        staticDate={new Date(2022, 0, 1, 12, 15, 0)}
        showSecondHand={false}
/>

Dots Clock Face:

●

<AnalogClock 
        numbersType="dots"
/>

Square Numbers Clock Face:

●

<AnalogClock 
        square
        numbersType="numbers"
/>

Lines Clock Face With No Border:

●

<AnalogClock 
        numbersType="lines"
        showBorder={false}
/>

Roman face with custom hands:

●

<AnalogClock 
        numbersType="roman"
        handLength={{
          hour: "40px",
          minute: "50px",
          second: "60px",
        }}
        handThickness={{
          hour: "5px",
          minute: "3px",
          second: "1px",
        }}
/>

Custom Clock Face and Size:

●

import customBg from "./assets/custom-bg.png";
            .
            .
            .
<AnalogClock customBg={customBg} size="250px" />

Custom Colors:

●

<AnalogClock 
        whiteNumbers
        backgroundColor="slateBlue"
        handBaseColor="cyan"
        borderColor="darkBlue"
        handColor={{
          hour: "white",
          minute: "white",
          second: "lightBlue",
        }}
/>