JSPM

react-flip-clock-count-down

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q64259F
  • License MIT

react flip clock count down, takes Timestamp in milliseconds

Package Exports

  • react-flip-clock-count-down

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-flip-clock-count-down) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react flip clock timer (Count down)

Based on the chinese version: http://xiaxiangfeng.github.io/flip-clock/index.html https://www.npmjs.com/package/react-flip-clock https://github.com/xiaxiangfeng/react-flip-clock

Installation

npm i react-flip-clock-count-down

Examples

Using webpack

import Clock from "react-flip-clock-count-down";

const Index = () => {
  return (
    <div>
      <Clock endTime={1618237200000} />
    </div>
  );
};

render(<Index />, document.getElementById("app"));

Custom Styles

You can override this

/*Width and Height*/
.flip-clock-wrapper ul {
  width: 60px;
  height: 90px;
}

/*Background colours*/
.flip-clock-wrapper .inn {
  background-color: #502d2d;
  font-size: 70px;
}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test