Simple clock React component.
Storybook: https://react-playground.docs.kitsuyui.com/storybook/
npm install @kitsuyui/react-clockyarn add @kitsuyui/react-clockpnpm add @kitsuyui/react-clockimport {
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
}MIT