2.0.5 • Published 1 year ago
@goldeneye-industrial-intelligence/react-countdown-clock v2.0.5
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 name | Type | Description | Example values |
---|---|---|---|
day | boolean | Displays the day section. | day={true} |
endDate | string | Displays the date count from endDate. | endDate="2017-06-01" |
clockSeparator | string | Sets the separator between days, hours and minutes. We are using . as the default separator | clockSeparator="." |
style | object | Sets 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.