demo components

Author: amrlabib

demo/App.js

@@ -1,54 +1,18 @@
 import React from 'react';
-import { useTimer } from '../src/index';
+import UseTimerDemo from './components/UseTimerDemo';
+import UseStopwatchDemo from './components/UseStopwatchDemo';
+import UseTimeDemo from './components/UseTimeDemo';
 
 
-function MyTimer({ expiryTimestamp }) {
-  const {
-    seconds,
-    minutes,
-    hours,
-    days,
-    isRunning,
-    start,
-    pause,
-    resume,
-    restart,
-  } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });
-
-
-  return (
-    <div style={{ textAlign: 'center' }}>
-      <h1>react-timer-hook </h1>
-      <p>Timer Demo</p>
-      <div style={{ fontSize: '100px' }}>
-        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
-      </div>
-      <p>{isRunning ? 'Running' : 'Not running'}</p>
-      <button type="button" onClick={start}>Start</button>
-      <button type="button" onClick={pause}>Pause</button>
-      <button type="button" onClick={resume}>Resume</button>
-      <button
-        type="button"
-        onClick={() => {
-          // Restarts to 5 minutes timer
-          const time = new Date();
-          time.setSeconds(time.getSeconds() + 300);
-          restart(time);
-        }}
-      >
-        Restart
-      </button>
-    </div>
-  );
-}
-
 export default function App() {
   const time = new Date();
   // time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
   time.setMilliseconds(time.getMilliseconds() + 100); // 6.5 seconds timer
   return (
     <div>
-      <MyTimer expiryTimestamp={time} />
+      <UseTimerDemo expiryTimestamp={time} />
+      <UseStopwatchDemo />
+      <UseTimeDemo />
     </div>
   );
 }

demo/components/UseStopwatchDemo.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useStopwatch } from '../../src/index';
+
+export default function UseStopwatchDemo() {
+  const {
+    seconds,
+    minutes,
+    hours,
+    days,
+    isRunning,
+    start,
+    pause,
+    reset,
+  } = useStopwatch({ autoStart: true });
+
+
+  return (
+    <div style={{textAlign: 'center'}}>
+      <p>Stopwatch Demo</p>
+      <div style={{fontSize: '100px'}}>
+        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
+      </div>
+      <p>{isRunning ? 'Running' : 'Not running'}</p>
+      <button onClick={start}>Start</button>
+      <button onClick={pause}>Pause</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+}

demo/components/UseTimeDemo.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTime } from '../../src/index';
+
+export default function UseTimeDemo() {
+  const {
+    seconds,
+    minutes,
+    hours,
+    ampm,
+  } = useTime({ format: '12-hour'});
+
+  return (
+    <div style={{textAlign: 'center'}}>
+      <p>Current Time Demo</p>
+      <div style={{fontSize: '100px'}}>
+        <span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span><span>{ampm}</span>
+      </div>
+    </div>
+  );
+}

demo/components/UseTimerDemo.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTimer } from '../../src/index';
+
+export default function UseTimerDemo({ expiryTimestamp }) {
+  const {
+    seconds,
+    minutes,
+    hours,
+    days,
+    isRunning,
+    start,
+    pause,
+    resume,
+    restart,
+  } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });
+
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <h1>react-timer-hook </h1>
+      <p>Timer Demo</p>
+      <div style={{ fontSize: '100px' }}>
+        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
+      </div>
+      <p>{isRunning ? 'Running' : 'Not running'}</p>
+      <button type="button" onClick={start}>Start</button>
+      <button type="button" onClick={pause}>Pause</button>
+      <button type="button" onClick={resume}>Resume</button>
+      <button
+        type="button"
+        onClick={() => {
+          // Restarts to 5 minutes timer
+          const time = new Date();
+          time.setSeconds(time.getSeconds() + 300);
+          restart(time);
+        }}
+      >
+        Restart
+      </button>
+    </div>
+  );
+}