@adactive/arc-clock

Clock component

The clock component is, in reality, a wrapper function, which wraps the component, which you supply and provides all the props you need to create your own look and feel for the clock :)

Live examples here

Getting started

    npm i --save @adactive/arc-clock

OR

    yarn add @adactive/arc-clock

    import AdsumClock from "@adactive/arc-clock"
     ...
    // Your own stateless UI component for the clock
    // You will be provided with props, which are described below
    const ClockUi = (props) => (
        <div role="presentation" className="adsum-clock-wrapper">
            <div className="adsum-clock">
                <div className="day-date">{props.dateStr}</div>
                <div className="time">{props.timeStr}</div>
            </div>
        </div>
    );


    // The actual wrapping of your component with AdsumClock wrapper
    const Clock = AdsumClock(ClockUi);

    // Usage of the wrapped component
    <Clock lang="en" timeFormat="12hrs" />

Props

static defaultProps = {
    lang: 'en',
    timeFormat: '24hrs',
};

type AdsumClockPropsType = {
    lang: LangType,
    timeFormat: TimeFormatType
};

Additional props, which will be passed to the provided ClockUi component:

{
    +year: string,
    +month: string,
    +day: string,
    +hours: string,
    +minutes: string,
    +dateStr: string,
    +timeStr: string
};

type LangType = 'en' | 'zh' | 'fr';
type TimeFormatType = '24hrs' | '12hrs';
type AdsumClockPropsType = {
    lang: LangType,
    timeFormat: TimeFormatType
};

Copy component inside your project src folder

Less only

`npx @adactive/arc-clock copy --less-only`

Full copy

`npx @adactive/arc-clock copy`