update package name

alim1496 · May 25, 2023 · e7b3cbd · e7b3cbd
1 parent 863bdd3
commit e7b3cbd
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# react-awesome-clock
+# react-simple-clock
 
 This repository contains simple analog clock to be used in React applications. You can either use the live clock or set 
 your given time to see a stationary clock.

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My React Component</title>
+    <title>React Simple Clock</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "react-awesome-clock",
+	"name": "react-simple-clock",
 	"version": "1.0.0",
 	"description": "A react component to display clock",
 	"license": "MIT",
@@ -12,12 +12,12 @@
 		"dist",
 		"README.md"
 	],
-	"main": "./dist/react-awesome-clock.umd.js",
-	"module": "./dist/react-awesome-clock.es.js",
+	"main": "./dist/react-simple-clock.umd.js",
+	"module": "./dist/react-simple-clock.es.js",
 	"exports": {
 		".": {
-			"import": "./dist/react-awesome-clock.es.js",
-			"require": "./dist/react-awesome-clock.umd.js"
+			"import": "./dist/react-simple-clock.es.js",
+			"require": "./dist/react-simple-clock.umd.js"
 		}
 	},
 	"scripts": {

diff --git a/src/lib/components/Clock.jsx b/src/lib/components/Clock.jsx
@@ -43,9 +43,9 @@ const Clock = (props) => {
 			))}
 			<div className="rac-hand-wrapper" style={{ width: size, height: size/2 }}>
 				<div className="rac-mid-point" style={{ height: size/20, width: size/20, transform: `translateY(${size/40}px)` }}></div>
-				{live && <Hand height={4*size/10} handID="rac-second-hand" angle={second*6} />}
-				<Hand height={3*size/10} handID="rac-minute-hand" angle={minute*6+second/10} />
-				<Hand height={size/5} handID="rac-hour-hand" angle={hour*30+minute/2} />
+				{live && <Hand height={4*size/10} angle={second*6} />}
+				<Hand height={3*size/10} angle={minute*6+second/10} />
+				<Hand height={size/5} angle={hour*30+minute/2} />
 			</div>
 		</div>
 	)

diff --git a/src/lib/components/Hand.jsx b/src/lib/components/Hand.jsx
@@ -1,23 +1,26 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useRef } from "react"
 import PropTypes from "prop-types"
 
-const Hand = ({ height, width = 5, handID, angle }) => {
+const Hand = ({ height, width = 5, angle }) => {
+	const handRef = useRef()
+
 	useEffect(() => {
-		(document.getElementById(handID)).style.transform = `rotate(${angle}deg)`
+		try {
+			handRef.current.style.transform = `rotate(${angle}deg)`
+		} catch (e) {
+			console.error(e)
+		}
 	}, [angle])
 
 	return (
-		<div style={{ height, width }} id={handID} className="rac-clock-hand">
-
-		</div>
+		<div ref={handRef} style={{ height, width }} className="rac-clock-hand"></div>
 	)
 }
 
 Hand.propTypes = {
 	height: PropTypes.number,
 	width: PropTypes.number,
-	angle: PropTypes.number,
-	handID: PropTypes.string
+	angle: PropTypes.number
 }
 
 export default Hand
diff --git a/vite.config.js b/vite.config.js
@@ -6,8 +6,8 @@ export default defineConfig({
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/lib/index.jsx'),
-      name: 'react-awesome-clock',
-      fileName: (format) => `react-awesome-clock.${format}.js`
+      name: 'react-simple-clock',
+      fileName: (format) => `react-simple-clock.${format}.js`
     },
     rollupOptions: {
       external: ['react', 'react-dom'],