# react-analog-clock

> A themable analog clock component

Latest version **2.1.0** (published 2018-06-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-analog-clock
pnpm add react-analog-clock
yarn add react-analog-clock
bun add react-analog-clock
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2018-06-11 |
| First published | 2016-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 88.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 50 |
| Maintainers | zackargyle |
| Keywords | react, react-component, clock, analog, time |

## Links

- npm: https://www.npmjs.com/package/react-analog-clock
- Repository: https://github.com/zackargyle/react-analog-clock
- Homepage: https://github.com/zackargyle/react-analog-clock#readme
- Issues: https://github.com/zackargyle/react-analog-clock/issues
- npm.io page: https://npm.io/package/react-analog-clock

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2018-06-11
- 2.0.0 — 2017-10-18
- 1.6.0 — 2017-03-27
- 1.4.1 — 2016-08-04

## README

# \<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](http://zackargyle.github.io/react-analog-clock/)

![](https://raw.githubusercontent.com/zackargyle/react-analog-clock/master/demo/screenshot.png)

### Usage
```js
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](http://isekivacenz.mit-license.org/)

---
_Source: https://npm.io/package/react-analog-clock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._