Adsum Clock Component


0132.5.33 years ago4 years agoMinified + gzip package size for @adactive/arc-clock in KB


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


    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>

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

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


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`

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.