Add the clock scale

src/Clock.jsx

@@ -60,6 +60,7 @@ export default class Clock extends Component {
         <Mark
           angle={i * 30}
           key={`hour_${i}`}
+          number={this.props.showNumber ? i : null}
           length={hourMarksLength}
           name="hour"
           width={hourMarksWidth}
@@ -222,6 +223,7 @@ Clock.propTypes = {
   secondHandOppositeLength: isOppositeHandLength,
   secondHandWidth: isHandWidth,
   size: PropTypes.number,
+  showNumber: PropTypes.bool,
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.instanceOf(Date),

src/Clock.less

@@ -45,11 +45,18 @@
       background-color: black;
       transform: translateX(-50%);
     }
+
+    &__number {
+      position: absolute;
+      left: -40px;
+      width: 80px;
+      text-align: center;
+    }
   }
 
   &__second-hand {
     &__body {
       background-color: red;
     }
   }
-}
+}

src/Mark.jsx

@@ -8,6 +8,7 @@ const Mark = ({
   length,
   name,
   width,
+  number,
 }) => (
   <div
     className={`react-clock__mark react-clock__${name}-mark`}
@@ -23,6 +24,19 @@ const Mark = ({
         bottom: `${100 - (length / 2)}%`,
       }}
     />
+
+    {number &&
+      <div
+        className="react-clock__mark__number"
+        style={{
+      transform: `rotate(-${angle}deg)`,
+      top: `${length / 2}%`,
+      }}
+      >
+        {number}
+      </div>
+    }
+
   </div>
 );
 
@@ -37,6 +51,7 @@ Mark.propTypes = {
   length: isMarkLength,
   name: PropTypes.string.isRequired,
   width: isMarkWidth,
+  number: PropTypes.number,
 };
 
 export default Mark;

src/entry.js

@@ -1,5 +1,6 @@
 import Clock from './Clock';
 
+/* eslint-disable */
 import './Clock.css';
 
 export default Clock;