# @meecolabs/react-clock

> An analog clock for your React app.

Latest version **2.4.1** (published 2019-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @meecolabs/react-clock
pnpm add @meecolabs/react-clock
yarn add @meecolabs/react-clock
bun add @meecolabs/react-clock
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.4.1 |
| Published | 2019-06-26 |
| First published | 2019-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 56.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Wojciech Maj |
| Maintainers | alopix |
| Keywords | clock, digital clock, analog clock, time, react |

## Links

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

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [merge-class-names](https://npm.io/package/merge-class-names.md) ^1.1.1

## 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.4.1 (latest) — 2019-06-26
- 2.4.0 — 2019-06-26

## README

![downloads](https://img.shields.io/npm/dt/react-clock.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-clock/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-clock.svg
) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-clock.svg
) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

# React-Clock

An analog clock for your React app.

## tl;dr
* Install by executing `npm install react-clock` or `yarn add react-clock`.
* Import by adding `import Clock from 'react-clock'`.
* Use by adding `<Clock />`.

## Demo

Minimal demo page is included in sample directory.

[Online demo](http://projects.wojtekmaj.pl/react-clock/) is also available!

## Installation

Add React-Clock to your project by executing `npm install react-clock` or `yarn add react-clock`.

### Usage

Here's an example of basic usage:

```js
import React, { Component } from 'react';
import Clock from 'react-clock';

class MyApp extends Component {
  state = {
    date: new Date(),
  }

  componentDidMount() {
    setInterval(
      () => this.setState({ date: new Date() }),
      1000
    );
  }

  render() {
    return (
      <div>
        <p>Current time:</p>
        <Clock
          value={this.state.date}
        />
      </div>
    );
  }
}
```

### Custom styling

If you don't want to use default React-Clock styling to build upon it, you can import React-Clock by using `import Clock from 'react-clock/dist/entry.nostyle';` instead.

## User guide

### Clock

Displays a complete clock.

#### Props

|Prop name|Description|Example values|
|----|----|----|
|className|Defines class name(s) that will be added along with "react-clock" to the main React-Clock `<time>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
|hourHandLength|Defines the length of an hour hand, in %. Defaults to `50`.|`80`|
|hourHandOppositeLength|Defines the length of the part of an hour hand on the opposite side the hand is pointing to, in %. Defaults to `10`.|`20`|
|hourHandWidth|Defines the width of an hour hand, in pixels. Defaults to `4`.|`3`|
|hourMarksLength|Defines the length of hour marks, in %. Defaults to `10`.|`8`|
|hourMarksWidth|Defines the width of hour marks, in pixels. Defaults to `3`.|`2`|
|minuteHandLength|Defines the length of a minute hand, in %. Defaults to `70`.|`80`|
|minuteHandOppositeLength|Defines the length of the part of a minute hand on the opposite side the hand is pointing to, in %. Defaults to `10`.|`20`|
|minuteHandWidth|Defines the width of a minute hand, in pixels. Defaults to `2`.|`3`|
|minuteMarksLength|Defines the length of minute marks, in %. Defaults to `6`.|`8`|
|minuteMarksWidth|Defines the width of a minute hand, in pixels. Defaults to `1`.|`2`|
|renderHourMarks|Defines whether hour marks shall be rendered. Defaults to `true`.|`false`|
|renderMinuteHand|Defines whether minute hand shall be rendered. Defaults to `true`.|`false`|
|renderMinuteMarks|Defines whether minute marks shall be rendered. Defaults to `true`.|`false`|
|renderNumbers|Defined whether numbers shall be rendered. Defaults to `false`.|`true`|
|renderSecondHand|Defines whether second hand shall be rendered. Defaults to `true`.|`false`|
|secondHandLength|Defines the length of a second hand, in %. Defaults to `90`.|`80`|
|secondHandOppositeLength|Defines the length of the part of a second hand on the opposite side the hand is pointing to, in %. Defaults to `10`.|`20`|
|secondHandWidth|Defines the width of a second hand, in pixels. Defaults to `1`.|`2`|
|style|Css style object.||
|value|Defines the value of the clock. Must be provided.|Date: `new Date()`|

## License

The MIT License.

## Author

<table>
  <tr>
    <td>
      <img src="https://github.com/wojtekmaj.png?s=100" width="100">
    </td>
    <td>
      Wojciech Maj<br />
      <a href="mailto:kontakt@wojtekmaj.pl">kontakt@wojtekmaj.pl</a><br />
      <a href="http://wojtekmaj.pl">http://wojtekmaj.pl</a>
    </td>
  </tr>
</table>

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