# react-live-clock-date-fns

> Simple live clock component using date-fns

Latest version **1.0.0** (published 2021-08-21) · 0 weekly downloads

## Install

```sh
npm install react-live-clock-date-fns
pnpm add react-live-clock-date-fns
yarn add react-live-clock-date-fns
bun add react-live-clock-date-fns
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-08-21 |
| First published | 2021-08-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 6.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Author | Sandun Rathsara |
| Maintainers | sandunrathsara |
| Keywords | react, components, ui, live, clock, date-fns |

## Links

- npm: https://www.npmjs.com/package/react-live-clock-date-fns
- Repository: https://github.com/jawblia/npm-test
- Homepage: https://github.com/jawblia/npm-test#readme
- Issues: https://github.com/jawblia/npm-test/issues
- npm.io page: https://npm.io/package/react-live-clock-date-fns

## Dependencies (11)

- [react](https://npm.io/package/react.md) ^17.0.2
- [date-fns](https://npm.io/package/date-fns.md) ^2.23.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.14.5
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-08-21

## README

# react-live-clock-date-fns

## Installation

### NPM
```sh
npm install --save react react-live-clock-date-fns
```

## Usage
```js
import React  from 'react';
import Clock from 'react-live-clock-date-fns';

exports default function MyComponent() {
    return <Clock />
}
```

Outputs:

```html
<time>10:15:34</time>
```

 ** Shows current time using new Date() constructor and updates every second


### Formatting

you can use any formatting from [date-fns](https://date-fns.org/v2.23.0/docs/format) date library

### Properties

| Propertie  | Type                | Default Value | Description |
|------------|---------------------|---------------|-------------|
| `format`   | string              | 'h:mm:ss a, MMMM do yyyy'       | Formatting from [date-fns](https://date-fns.org/v2.23.0/docs/format) library.
| `interval` | integer             | 1000          | Auto-updating period for the clock. 1 second is a default value.
| `className`| string              | null          | Extra class.
| `style`| object              | null          | Extra styles.

## Development and testing

Currently is being developed and tested with the latest stable `Node 14` on `Linux`.

To run example, use`yarn start`, which will start development project

```bash
git clone https://github.com/SandunRathsara/react-live-clock-date-fns.git
cd react-live-clock-date-fns
yarn install
yarn start

# then
open http://localhost:3000
```
### License
This software is released under the MIT license. See LICENSE for more details.

### Contributors

* [SandunRathsara](https://github.com/SandunRathsara)

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