How to add Analog Clock in ReactJS ?

Last Updated : 30 Nov, 2023

In this article, we are going to learn how we can add Analog Clock in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

Approach to create Analog Clock:

To add our Analog clock we are going to use the analog-clock-react package because it is powerful, lightweight, and fully customizable. After that, we will add our clock on our homepage using the installed package.

Steps to Create the React Application And Installing Module:

Step1: Create a React application using the following command:

npx create-react-app name_of_the_app

Step 2: After creating the react application move to the directory as per your app name using the following command:

cd name_of_the_app

Step 3: Install the required package analog-clock-react using the below command:

npm i analog-clock-react

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "analog-clock-react": "^1.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: In the above example first, we are importing the AnalogClock component from the analog-clock-react package. We are going to add the clock on the homepage of our app using the package that we installed.

Javascript

import AnalogClock from 'analog-clock-react';
 
export default function ReactClock() {
    let options = {
        width: "300px",
        border: true,
        borderColor: "#2e2e2e",
        baseColor: "#17a2b8",
        centerColor: "#459cff",
        centerBorderColor: "#ffffff",
        handColors: {
            second: "#d81c7a",
            minute: "#ffffff",
            hour: "#ffffff"
        }
    };
 
    return (
        <div>
            <h2>React Clock - GeeksforGeeks</h2>
            <AnalogClock {...options} />
        </div>
    )
}