0.1.4 • Published 18 days ago
@kitsuyui/react-clock v0.1.4
@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
0.1.4
18 days ago
0.1.3
18 days ago
0.1.2
2 months ago
0.1.1
2 months ago
0.1.0
4 months ago
0.0.33
6 months ago
0.0.20
8 months ago
0.0.21
8 months ago
0.0.22
8 months ago
0.0.23
8 months ago
0.0.24
8 months ago
0.0.25
7 months ago
0.0.16
9 months ago
0.0.18
8 months ago
0.0.19
8 months ago
0.0.30
6 months ago
0.0.31
6 months ago
0.0.32
6 months ago
0.0.0
9 months ago
0.0.26
7 months ago
0.0.27
7 months ago
0.0.28
7 months ago
0.0.29
7 months ago
0.0.11
12 months ago
0.0.10
12 months ago
0.0.9
12 months ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.3
1 year ago