Merge pull request #24 from amrlabib/readme-updates

Readme updates

Author: amrlabib

.eslintrc

@@ -6,6 +6,7 @@
   "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
+    "react/jsx-filename-extension": 0,
     "no-unused-expressions": [ 2,{
       "allowShortCircuit": true,
     }],

.npmignore

@@ -5,7 +5,6 @@ build
 !.eslintrc
 yarn-error.log
 dev-dist
-readme-images
 
 *.js
 !dist/index.js

app/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTimer } from '../src/index';
 
+
 function MyTimer({ expiryTimestamp }) {
   const {
     seconds,
@@ -10,36 +11,41 @@ function MyTimer({ expiryTimestamp }) {
     start,
     pause,
     resume,
-    restart
+    restart,
   } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });
 
 
   return (
-    <div style={{textAlign: 'center'}}>
+    <div style={{ textAlign: 'center' }}>
       <h1>react-timer-hook </h1>
       <p>Timer Demo</p>
-      <div style={{fontSize: '100px'}}>
+      <div style={{ fontSize: '100px' }}>
         <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
       </div>
-      <button onClick={start}>Start</button>
-      <button onClick={pause}>Pause</button>
-      <button onClick={resume}>Resume</button>
-      <button onClick={() => {
-        // Restarts to 5 minutes timer
-        var t = new Date();
-        t.setSeconds(t.getSeconds() + 300);
-        restart(t)
-      }}>restart</button>
+      <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() {
-  var t = new Date();
-  t.setSeconds(t.getSeconds() + 600); // 10 minutes timer
+  const time = new Date();
+  time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
   return (
     <div>
-      <MyTimer expiryTimestamp={t} />
+      <MyTimer expiryTimestamp={time} />
     </div>
   );
 }

readme-images/useStopwatch.gif

@@ -56,20 +56,20 @@ function MyTimer({ expiryTimestamp }) {
       <button onClick={resume}>Resume</button>
       <button onClick={() => {
         // Restarts to 5 minutes timer
-        var t = new Date();
-        t.setSeconds(t.getSeconds() + 300);
-        restart(t)
-      }}>restart</button>
+        const time = new Date();
+        time.setSeconds(time.getSeconds() + 300);
+        restart(time)
+      }}>Restart</button>
     </div>
   );
 }
 
 export default function App() {
-  var t = new Date();
-  t.setSeconds(t.getSeconds() + 600); // 10 minutes timer
+  const time = new Date();
+  time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
   return (
     <div>
-      <MyTimer expiryTimestamp={t} />
+      <MyTimer expiryTimestamp={time} />
     </div>
   );
 }