@kitsuyui/react-clock

Simple clock React component.

Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

Installation

npm

npm install @kitsuyui/react-clock

yarn

yarn add @kitsuyui/react-clock

pnpm

pnpm add @kitsuyui/react-clock

Usage

import {
  ClockContainer,
  AnalogClock,
  DigitalClock,
} from '@kitsuyui/react-clock'

const Clock = () => {
  return (
    <ClockContainer>
      <DateContext.Consumer>
        {(date: Date) => (
          <>
            <AnalogClock timezone="Asia/Tokyo" date={date} />
            <DigitalClock timezone="America/New_York" date={date} />
          </>
        )}
      </DateContext.Consumer>
    </ClockContainer>
  )
}

ClockContainer is a component that provides DateContext. Clocks are pure components that do not depend on DateContext. Only the date and timezone are passed as props. So you can define your own Timer component by same interface.

export interface ClockProps {
  timezone: string
  date: Date
}

License

MIT