🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An awesome countdown & digital clock component for React app.

Date_Time React

Documentation

npm version

npm

REACT AWESOME CLOCK

react-awesome-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 (StartDate as mentioned in docs).

Why react-awesome-clock?

  1. Single Component for every type of clock - It provides you a generic clock component, which allows you to design it dynamically as you want. You can aply whatever style you want. You can also use it as a timer by just providing the starting date using momentJS.

DEMO

Simple Clock Component

Simple Clock Component Gif

Clock Component With Days Count

Clock Component With Days Count Gif

Getting Started

Installation

npm install --save react-awesome-clock

Exports

Here's how to use it:

// ES6 import ReactAwesomeClock from "react-awesome-clock"; // React Awesome Clock  // CommonJS let ReactAwesomeClock = require("react-awesome-clock");

<ReactAwesomeClock>

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

ReactAwesomeClock Usage

import React from "react"; import ReactDOM from "react-dom"; import ReactAwesomeClock from "react-awesome-clock";  class App extends React.Component {   render() {     return (       <div>         // Simple Clock Component         <ReactAwesomeClock style={{ color: "lightGrey", fontSize: 70 }} />         <ReactAwesomeClock           day={true}           style={{             color: "grey",             fontSize: 60,             textShadow: "0 0 10px grey",             fontFamily: "aerial"           }}         />         // Clock Component With Days Count         <ReactAwesomeClock           day={true}           style={{ color: "lightGrey", fontSize: 70 }}           startDate="2018-09-06"         />       </div>     );   } }  ReactDOM.render(<App />, document.body);

<ReactAwesomeClock> Props:

Prop name Type Description Example values
day boolean Displays the day section. day={true}
startDate string Displays the date count from startDate. startDate="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.

Author

Alqama Bin Sadiq
[email protected]
https://alqamabinsadiq.github.io/

You May Also Like