# @sujitsimon/react-flipclock

> React Flip Clock widget for your react-app

Latest version **0.1.2** (published 2023-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sujitsimon/react-flipclock
pnpm add @sujitsimon/react-flipclock
yarn add @sujitsimon/react-flipclock
bun add @sujitsimon/react-flipclock
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2023-01-22 |
| First published | 2023-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 687.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sujit Simon |
| Maintainers | sujitsimon |
| Keywords | react-flip-clock, flip-clock, countdown-timer, stopwatch, clock |

## Links

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

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [react-scripts](https://npm.io/package/react-scripts.md) ^5.0.1
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Recent versions

- 0.1.2 (latest) — 2023-01-22
- 0.1.1 — 2023-01-22
- 0.1.0 — 2023-01-22

## README

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)


# react-flip-clock

A simple react-flip-clock widget with customizaion



## Download Project

Clone react-clock

```bash
  git clone https://github.com/sujitsimon/react-flip-clock.git
```
## Installation

Install react-flip-clock with npm

```bash
  npm i @sujitsimon/react-flipclock
```
    
## Usage/Examples

```javascript
import { Clock } from '@sujitsimon/react-flipclock';

function App() {
  return <Clock config={{height: '100px', backgroundColor: '#241623', textColor: '#fff'}}/>
}
```
## Demo

![](https://github.com/sujitsimon/react-clock/blob/main/screenshots/react-clock.gif)

## API Reference

#### Clock API

```javascript
  <Clock config={{height: '100px', backgroundColor: '#241623', textColor: '#fff'}}/>
```

| Parameter | Type     | Description                |
| :-------- | :------- | :------------------------- |
| `height` | `string` |  height of clock element. **Default:** `100px`|
| `backgroundColor` | `string` |  background hex color code. **Default:** `#241623`|
| `textColor` | `string` |  text hex color code. **Default:** `#FFFFFF`|
| `format` | `string` |  `12h` or `24h` **Default:** `12h`|

#### Countdown Timer API

```javascript
  <CountDownTimer config={{height: '100px', backgroundColor: '#241623', textColor: '#fff'}}
                  countDownTime={{hours: 0, minutes: 0, seconds: 10}}
                  onCountDownComplete={()=> {console.log('Timer Complete')}}/>
```

| Parameter | Type     | Description                |
| :-------- | :------- | :------------------------- |
| `height` | `string` |  height of clock element. **Default:** `100px`|
| `backgroundColor` | `string` |  background hex color code. **Default:** `#241623`|
| `textColor` | `string` |  text hex color code. **Default:** `#FFFFFF`|
| `countDownTime` | `object` |  **Mandatory**:`{hours: number, minutes: number, seconds: number}`|
| `onCountDownComplete` | `callback` |  *Callback function* on Countdown timer Complete|


#### StopWatch API

```javascript
  <StopWatch config={{height: '100px', backgroundColor: '#241623', textColor: '#fff'}} onTimerExit={(s)=> {console.log('Timer Exit', s)}}/>
```

| Parameter | Type     | Description                |
| :-------- | :------- | :------------------------- |
| `height` | `string` |  height of clock element. **Default:** `100px`|
| `backgroundColor` | `string` |  background hex color code. **Default:** `#241623`|
| `textColor` | `string` |  text hex color code. **Default:** `#FFFFFF`|
| `stopTimer` | `boolean` |  stop timer|
| `onTimerExit` | `callback` |  *Callback function* on *stopTimer* is called. Returns *elapsed_time* in *ms*|

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