React Clock

An analog clock for your React application.

Installation

> npm install @nealrame/react-clock

Usage

import * as React from "react"

import Clock from "@neal-rame/react-clock"

const app = () => {
    const [date, setDate] = React.useState(new Date())

    React.useEffect(() => {
        const interval = setInterval(() => {
            setDate(new Date())
        }, 1000)
        return () => clearInterval(interval)
    })

    return <Clock date={ date } />
}

Customization

size

Use this property to change the size of the clock.

example

const app = () => {
    return <Clock date={ new Date() } size={ 200 } />
}

backgroundColor

Use this property to change the background color of the clock. Accept a string parsed as CSS <color> value.

example

const app = () => {
    return <Clock
        date={ new Date() }
        backgroundColor={ "#fddd9c" }
    />
}

borderColor

Use this property to change the border color of the clock. Accept a string parsed as CSS <color> value.

example

const app = () => {
    return <Clock
        date={ new Date() }
        borderColor={ "#a56ef9" }
    />
}

borderThickness

Use this property to change the border thickness of the clock. Accept a number.

example

const app = () => {
    return <Clock
        date={ date }
        borderColor={ "#bbb" }
        borderThickness={ 18 }
    />
}

padding

Use this property to change the padding between border and marks of the clock. Accept a number.

example

const app = () => {
    return <Clock
        date={ date }
        padding={ 16 }
    />
}

hourHandColor

minuteHandColor

secondHandColor

Use this properties to change the color of respectively hour, minute and second hand. Accept a string parsed as CSS <color> value.

example

const app = () => {
    return <Clock
        date={ date }
        hourHandColor={ "#02b701" }
        minuteHandColor={ "#a56ef9" }
        secondHandColor={ "#37a1ff" }
    />
}

hourHandRadius

minuteHandRadius

secondHandRadius

Use this properties to change the radius of respectively hour, minute and second hand. Accept number.

example

const app = () => {
    return <Clock
        date={ date }
        hourHandRadius={ 16 }
        minuteHandRadius={ 16 }
        secondHandRadius={ 16 }
    />
}

hourHandSize

minuteHandSize

secondHandSize

Use this property to change the size of the hour hand. Accept a number.

example

const app = () => {
    return <Clock
        date={ date }
        hourHandSize={ 40 }
        minuteHandSize={ 64 }
        secondHandSize={ 72 }
    />
}

hourHandTailSize

minuteHandTailSize

secondHandTailSize

Use this property to change the size of the tail of respectively hour, minute and hand. Accept a number.

example

const app = () => {
    return <Clock
        date={ date }
        hourHandTailSize={ 16 }
        minuteHandTailSize={ 16 }
        secondHandTailSize={ 16 }
    />
}

hourHandThickness

minuteHandThickness

secondHandThickness

Use this property to change the thickness of respectively hour, minute and second hand. Accept a number.

example

const app = () => {
    return <Clock
        date={ date }
        hourHandThickness={ 14 }
        minuteHandThickness={ 10 }
        secondHandThickness={ 2 }
    />
}

hourMarkerColor

minuteMarkerColor

Use this property to change the color of respectively hour and minute markers. Accept a string parsed as CSS <color> value.

example

const app = () => {
    return <Clock
        date={ date }
        hourMarkerColor={ "#a56ef9" }
        minuteMarkerColor={ "#01aaba" }
    />
}

hourMarkerSize

minuteMarkerSize

Use this property to change the size of respectively hour and minute markers. Accept number.

example

const app = () => {
    return <Clock
        date={ date }
        hourMarkerSize={ 16 }
        minuteMarkerSize={ 10 }
    />
}

hourMarkerThickness

minuteMarkerThickness

Use this property to change the thickness of respectively hour and minute markers. Accept number.

example

const app = () => {
    return <Clock
        date={ date }
        hourMarkerThickness={ 2 }
        minuteMarkerThickness={ 1 }
    />
}