<AnalogClock />
AnalogClock is a themable clock component. It provides an easy way of adding a clock to your application. The clock is fully responsive based on the width prop you pass in.
npm install --save react-analog-clock Try out the DEMO
Usage
import AnalogClock, { Themes } from 'react-analog-clock'; ReactDOM.render(<AnalogClock theme={Themes.dark} />, element);Props
| prop | default |
|---|---|
width | 400px |
theme | Themes.dark |
gmtOffset (optional) | offset of new Date() (e.g. '-5.5') |
showSmallTicks (optional) | true |
Themes
| Theme | Description |
|---|---|
dark | Black base, black border |
light | White base, gray border |
aqua | Gray base, aqua border |
lime | Green base, white border |
sherbert | Gradient (green/pink) base, white border |
navy | Gradient (blue) base, white border |
Scripts
| script | description |
|---|---|
npm start | run the demo on localhost:3000 |
npm test | run the test suite |
npm run lint | run the linter |
Patrons
Be the first to contribute! ✌⊂(✰‿✰)つ✌
Ideas for contribution
- Allow % width values
- Add Timezone (Winter/Summertime) Support
- Update docs with how to write custom themes
- Add hand movement animation
