# x-react-flipclock

> Simple NPM package for React to display Flip Clock

Latest version **0.1.184153** (published 2018-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install x-react-flipclock
pnpm add x-react-flipclock
yarn add x-react-flipclock
bun add x-react-flipclock
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.184153 |
| Published | 2018-04-15 |
| First published | 2018-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 36.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Maxim Shklyar |
| Maintainers | xims |
| Keywords | react, flipclock |

## Links

- npm: https://www.npmjs.com/package/x-react-flipclock
- Repository: https://github.com/xims/x-react-flipclock
- Issues: https://github.com/xims/x-react-flipclock/issues
- npm.io page: https://npm.io/package/x-react-flipclock

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0

## 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

- 0.1.184153 (latest) — 2018-04-15
- 0.1.184152 — 2018-04-15
- 0.1.18415 — 2018-04-14
- 0.1.18414 — 2018-04-14
- 0.1.18413 — 2018-04-14

## README

# x-react-flipclock

Simple NPM package for React to display Flip Clock.  
Examples are at https://xims.github.io/x-react-flipclock  
Source repository at https://github.com/xims/x-react-flipclock  
NPM package page at https://www.npmjs.com/package/x-react-flipclock  


## Installation

`npm install x-react-flipclock`


## Usage

Initiate:
```js

import FlipClock from 'x-react-flipclock'

```

There are 2 types of display - Clock and Countdown 

To use as a clock - 
```js

<FlipClock
	type="clock"
 />

```


To use as a countdown - 
```js

<FlipClock 
	type = "countdown"
	count_to = "2019-01-01 00:00:00"
 />

```



### Options

Specify and configure units to display - 
```js

<FlipClock 
	type = "clock"
	units = {[
				{
					sep: '',
					type: 'days',
					title: 'day',
				},
				{
					sep: '/',
					type: 'months',
					title: 'month',
				},
				{
					sep: '/',
					type: 'years',
					title: 'year',
				},
				{
					sep: ' ',
					type: 'hours',
					title: 'hour',
				},
				{
					sep: ':',
					type: 'minutes',
					title: 'minute',
				},
				{
					sep: ':',
					type: 'seconds',
					title: 'second',
				}
			]}
 />

```


## Development

This package functionality is very basic and may be extended in the future.  
Would be great to develop the package to adapt unit sizes to container area.  
Also would be great to have styles options.  


## Contributions

Contributions are welcome!


## Acknowledgement

Initial code based on https://codepen.io/Libor_G/pen/JyJzjb


## License

Copyright (c) 2018 Maxim Shklyar, kisla interactive

Licensed under the MIT License.

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