<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

License

MIT