Skip to content

This project serves as an NPM package providing a React digital clock component that seamlessly integrates into any application.

Notifications You must be signed in to change notification settings

Afek-Sakaju/digital-clock-react

Repository files navigation

Digital-Clock-React

This NPM package presents a digital clock component tailored for React applications. It utilizes ReactJS, JavaScript, SASS, and ESLint to create an intuitive and visually appealing clock feature. With easy integration capabilities, it seamlessly becomes a part of any application, enhancing its functionality.


Live demo:
digital-clock-react


Configuration Options

The digital clock component offers a variety of configuration options to customize its appearance and functionality, including:

  • size: You have the option to showcase the clock face in two sizes: medium or small.
  • timestamp: The clock has the capability to exhibit a precise timestamp, enabling you to depict any desired time.
  • isMode24H(24/12 Hours Mode): The clock offers the flexibility to be presented in either the 12-hour or 24-hour format.
  • useInterval: You can optionally use the clock as a static display by turning off the interval.

Usage:

import React from "react";
import { Clock } from "digital-clock-react";
import { myTimestamp } from "./consts";

function App() {
    return (
        <div className="app-container">
            <Clock
                isMode24H
                size="small"
                useInterval={false}
                timestamp={myTimestamp}
            />
        </div>
    );
}

export default App;

Installation:

  • npm install digital-clock-react
    Include the package in your project's dependencies.

Development:

  • npm run build-jsdocs
    For JSDocs of the utils functions, after running open the 'index.html' file located inside the 'js-docs' folder.

Here's an example showcasing the utilization of the clock component:

Example-GIF


Author

:octocat: Afek Sakaju

About

This project serves as an NPM package providing a React digital clock component that seamlessly integrates into any application.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published