@sujitsimon/react-flipclock NPM

react-flip-clock

A simple react-flip-clock widget with customizaion

Download Project

Clone react-clock

  git clone https://github.com/sujitsimon/react-flip-clock.git

Installation

Install react-flip-clock with npm

  npm i @sujitsimon/react-flipclock

Usage/Examples

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

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

Demo

API Reference

Clock API

  <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

  <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

  <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

react-flip-clock flip-clock countdown-timer stopwatch clock

@babel/polyfill @testing-library/jest-dom @testing-library/react @testing-library/user-event prop-types react react-dom react-scripts web-vitals

@everything-registry/sub-chunk-880

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago