2.0.5 • Published 1 year ago

@goldeneye-industrial-intelligence/react-countdown-clock v2.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

REACT COUNTDOWN CLOCK

@goldeneye-industrial-intelligence/react-countdown-clock is a react component which can be used in any one of the following ways:

  • A Normal Clock
  • Days Count from a certain date (endDate as mentioned in docs).

Getting Started

Installation

npm install --save @goldeneye-industrial-intelligence/react-countdown-clock

Exports

Here's how to use it:

// ES6
import ReactCountdownClock from "@goldeneye-industrial-intelligence/react-countdown-clock"; // React Awesome Clock

// CommonJS
let ReactCountdownClock = require("@goldeneye-industrial-intelligence/react-countdown-clock");

<ReactCountdownClock>

A <ReactCountdownClock> element renders the clock. You can also add an additional days count to this component by just passing the endDate as props.

ReactCountdownClock Usage

import React from "react";
import ReactDOM from "react-dom";
import ReactCountdownClock from "@goldeneye-industrial-intelligence/react-countdown-clock";

class App extends React.Component {
  render() {
    return (
      <div>
        // Simple Clock Component
        <ReactCountdownClock style={{ color: "lightGrey", fontSize: 70 }} />
        <ReactCountdownClock
          day={true}
          style={{
            color: "grey",
            fontSize: 60,
            textShadow: "0 0 10px grey",
            fontFamily: "aerial",
          }}
        />
        // Clock Component With Days Count
        <ReactCountdownClock
          day={true}
          style={{ color: "lightGrey", fontSize: 70 }}
          endDate="2018-09-06"
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.body);

<ReactCountdownClock> Props:

Prop nameTypeDescriptionExample values
daybooleanDisplays the day section.day={true}
endDatestringDisplays the date count from endDate.endDate="2017-06-01"
clockSeparatorstringSets the separator between days, hours and minutes. We are using . as the default separatorclockSeparator="."
styleobjectSets the styles of the app, you can pass in any valid styles here.style={{ color: "lightGrey" }}

Contributing

  • Fork the project
  • Install the dependencies: $ npm install
  • Run the project: $ npm start
  • Make changes.
  • Add appropriate tests
  • $ npm test
  • If tests don't pass, make them pass.
  • Update README with appropriate docs.
  • Commit and make Pull Request.

License

This source code is licensed under the MIT license.