README

chameleon-clock

An efficient clock component build by react, and supports extend its dial and pointer, you can create a clock component in any shape/style with code just several lines.

Installation

npm i chameleon-clock

Use

It already expose a built-in typing definition for typescript, no need to install from npm @types.

import { Clock } from "chameleon-clock";

export interface IMyComponentProps {

    // ... Your props definition
    
}

const MyComponent: React.FunctionComponent<IMyComponentProps> = (props) => {

    const [date, setDate] = React.useState<Date>(new Date());
    
    return <Clock date={new Date()} onChange={setDate} />;
    
}

It is simple too in javascript.

const { Clock } = require("chameleon-clock");

const MyComponent = (props) => {

    const [date, setDate] = React.useState(new Date());
    
    return <Clock date={ new Date() } onChange = { setDate } />;
    
}

It is recommended to use typescript, and all of the following code examples will write by typescript( Why not have a try? :D ).

Custom Styles

Change clock's style by passing an object maked up by className to it.

const MyComponent: React.FunctionComponent<IMyComponentProps> = (props) => {

    return <Clock

        styles={{

            root: "my-style-clock-root",

            cursor: "my-style-clock-cursor",

            dial: "my-style-clock-dial"

        }}

        // ... Other props

    />;

}

styles.cursor is a className of every cursor by default, if you assign styles.hour/ styles.minute/ styles.second a className, hour/min/sec cursor's style will been rewrited.

const MyComponent: React.FunctionComponent<IMyComponentProps> = (props) => {

    return <Clock

        styles={{

            root: "my-style-clock-root",
            
            // Style of hour-cursor will been decide on className `my-style-clock-cursor-hour`
            hour: "my-style-clock-cursor-hour",
            
            // Style of other-cursors will been decide on className `my-style-clock-cursor`
            cursor: "my-style-clock-cursor",

            dial: "my-style-clock-dial",
            
        }}

        // ... Other props

    />;

}

Tips with FunctionComponent, use React.useMemo to cache the styles object will reduce render time.

const MyComponent: React.FunctionComponent<IMyComponentProps> = (props) => {

    const styles: IClockStyles = React.useMemo(() => {

        return {

            // ...

        };

    });

    return <Clock

        styles={styles}

        // ... Other props

    />;

}

Custom Renderer

If custom styles cannot satisfy your demand, make a trial of custom renderer, it allows you to rewrite clock-dial and clock-cursor component, see the details at API.

API

Props

If provided, additional class name to provide on the root element.

className ?: string;

If provided, component will adjust cursor position as specified date.

date ?: Date;

Custom styling for individual elements within the Clock DOM.

styles ?: IClockStyles;

Callback for when the date changes.

onChange ?: (newDate: Date) => void;

Custom renderer for the clock-dial.

onRenderDial ?: IRenderFunc;

Custom renderer for the all clock-cursors.

onRenderCursor ?: IRenderFunc;

Custom renderer for the hour-cursor.

onRenderHourCursor ?: IRenderFunc;

Custom renderer for the minute-cursor.

onRenderMinuteCursor ?: IRenderFunc;

Custom renderer for the second-cursor.

onRenderSecondCursor ?: IRenderFunc;

Typing

type IRenderFunc<A = unknown, B = unknown, C = unknown> = (a?: A, b?: B, c?: C) => React.ReactNode;

interface IClockStyles {
    root?: string;
    dial?: string;
    cursor?: string;
    hour?: string;
    minute?: string;
    second?: string;
}

enum ClockCursorSize {
    Small = 0,
    Middle = 1,
    Large = 2
}

Usage no npm install needed!