Skip to content

zackargyle/react-analog-clock

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<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

About

A themable React clock component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •