johnsage25/react-awesome-clock

A clock component build in react using moment and other libraries. It can be used in all kind of React applications.

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

Clock Component With Days Count

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/