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 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.
Create ReactJs Application: You can create a new ReactJs project using the below command:
npx create-react-app gfg
Install the required package: Now we will install the analog-clock-react package using the below command:
npm i analog-clock-react
Project Structure: It will look like this.
Adding Clock: In this example, we are going to add the clock on the homepage of our app using the package that we installed. For this, add the below content in the App.js file.
App.js
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 - neveropen</h2> Â Â Â Â Â Â <AnalogClock {...options} /> Â Â Â Â </div> Â Â ) } |
Explanation: In the above example first, we are importing the AnalogClock component from the analog-clock-react package. After that, we are creating an options variable and storing the settings in this variable. Then we are using our AnalogClock component to display the clock.
Steps to run the application: Run the below command in the terminal to run the app.
npm start
Output:
