diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index 2f6ed9f..0000000
--- a/.eslintrc
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "parser": "babel-eslint",
- "plugins": [
- "react-hooks"
- ],
- "rules": {
- "react-hooks/rules-of-hooks": "error",
- "react-hooks/exhaustive-deps": "warn",
- "no-unused-expressions": [ 2,{
- "allowShortCircuit": true,
- }],
- "max-len": 0
- },
- "extends": "airbnb"
-}
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
index fc1fdee..7977915 100644
--- a/.npmignore
+++ b/.npmignore
@@ -5,9 +5,8 @@ build
!.eslintrc
yarn-error.log
dev-dist
-readme-images
-
+docs
+demo
*.js
-!dist/index.js
-
+!dist/**/*
*.html
diff --git a/app/App.js b/app/App.js
deleted file mode 100644
index 6342fa4..0000000
--- a/app/App.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { useTimer } from '../src/index';
-
-function MyTimer({ expiryTimestamp }) {
- const {
- seconds,
- minutes,
- hours,
- days,
- start,
- pause,
- resume,
- restart
- } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });
-
-
- return (
-
-
react-timer-hook
-
Timer Demo
-
- {days} :{hours} :{minutes} :{seconds}
-
-
Start
-
Pause
-
Resume
-
{
- // Restarts to 5 minutes timer
- var t = new Date();
- t.setSeconds(t.getSeconds() + 300);
- restart(t)
- }}>restart
-
- );
-}
-
-export default function App() {
- var t = new Date();
- t.setSeconds(t.getSeconds() + 600); // 10 minutes timer
- return (
-
-
-
- );
-}
diff --git a/demo/App.tsx b/demo/App.tsx
new file mode 100644
index 0000000..20faf8e
--- /dev/null
+++ b/demo/App.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import UseTimerDemo from './components/UseTimerDemo';
+import UseStopwatchDemo from './components/UseStopwatchDemo';
+import UseTimeDemo from './components/UseTimeDemo';
+
+const GlobalStyle = createGlobalStyle`
+ html, body {
+ margin: 0;
+ font-family: Arial;
+ text-align: left;
+ color: #404549;
+ }
+ h2 {
+ margin-top: 20px;
+ }
+`;
+
+const Container = styled.div`
+ width: 1170px;
+ margin-left: auto;
+ margin-right: auto;
+`;
+
+const HeaderBG = styled.div`
+ background-color: #404549;
+`;
+
+const Header = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ & h1 {
+ margin: 20px 0;
+ }
+`;
+
+const H1 = styled.h1`
+ color: white;
+`;
+
+const Separator = styled.div`
+ height: 0px;
+ margin-top: 30px;
+ border: dashed 2px #404549;
+`;
+
+export default function App() {
+ const time = new Date();
+ time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
+ return (
+
+
+
+
+
+ react-timer-hook
+
+
+
+
+
+
+
+
+
+ React timer hook is a custom react hook built to handle timer, stopwatch, and time logic/state in your react component.
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/demo/components/Button.tsx b/demo/components/Button.tsx
new file mode 100644
index 0000000..9eeb58a
--- /dev/null
+++ b/demo/components/Button.tsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const ButtonStyled = styled.button`
+ border-radius: 5;
+ margin: 0 10px 0 0px;
+ outline: none;
+ border: none;
+ padding: 6px 14px;
+ color: #404549;
+ border-radius: 3px;
+ border: solid 1px #404549;
+ &: hover {
+ box-shadow: 0 0 11px rgba(33,33,33,.2);
+ cursor: pointer;
+ }
+`;
+
+export default ButtonStyled;
diff --git a/demo/components/Digit.tsx b/demo/components/Digit.tsx
new file mode 100644
index 0000000..13b89d1
--- /dev/null
+++ b/demo/components/Digit.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0 5px;
+ &: first-child {
+ margin-left: 0;
+ }
+`;
+
+const Title = styled.span`
+ font-size: 12px;
+ margin-bottom: 5px;
+`;
+
+const DigitContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ padding: 0;
+`;
+
+const SingleDigit = styled.span`
+ position: relative;
+ display: flex;
+ flex: 0 1 25%;
+ font-size: 30px;
+ background-color: #404549;
+ border-radius: 5px;
+ padding: 10px 12px;
+ color: white;
+ margin-right: 2px;
+ &:last-child {
+ margin-right: ;
+ }
+ &:after {
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ top: 50%;
+ bottom: 50%;
+ content: "";
+ width: '100%';
+ height: 2px;
+ background-color: #232323;
+ opacity: 0.4;
+ }
+`;
+
+type DigitType = {
+ value: number,
+ title: string,
+ isMIlliseconds?: boolean;
+};
+
+export default function Digit({ value, title, isMIlliseconds }: DigitType) {
+ const digits = value.toString().padStart(4, '0');
+ return (
+
+ {title}
+
+ {isMIlliseconds ?
+ <>
+
+ {digits[0]}
+
+
+ {digits[1]}
+
+ >
+ :
+ null
+ }
+
+ {digits[2]}
+
+
+ {digits[3]}
+
+
+
+ );
+}
diff --git a/demo/components/TimerStyled.tsx b/demo/components/TimerStyled.tsx
new file mode 100644
index 0000000..d91d7e0
--- /dev/null
+++ b/demo/components/TimerStyled.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import Digit from './Digit';
+
+const TimerContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: 30px;
+`;
+
+const SepartorContainer = styled.span`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ align-self: flex-end;
+ margin: 0 0 10px 0px;
+`;
+
+const Separtor = styled.span`
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ background-color: #404549;
+ border-radius: 6px;
+ margin: 5px 0px;
+`;
+
+type TimerType = {
+ milliseconds: number,
+ seconds: number,
+ minutes: number,
+ hours: number,
+ days?: number,
+ enableMilliseconds: boolean;
+};
+
+export default function TimerStyled({ milliseconds, seconds, minutes, hours, days, enableMilliseconds }: TimerType) {
+ return (
+
+ {days !== undefined ? : null}
+ {days !== undefined ? ( ): null}
+
+
+
+
+
+ {enableMilliseconds ?
+ <>
+
+
+ >
+ : null }
+
+ );
+}
diff --git a/demo/components/UseStopwatchDemo.tsx b/demo/components/UseStopwatchDemo.tsx
new file mode 100644
index 0000000..0b05489
--- /dev/null
+++ b/demo/components/UseStopwatchDemo.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useStopwatch } from '../../src/index';
+import Button from './Button';
+import TimerStyled from './TimerStyled';
+
+export default function UseStopwatchDemo({ interval }: { interval: number}) {
+ const {
+ milliseconds,
+ seconds,
+ minutes,
+ hours,
+ days,
+ start,
+ pause,
+ reset,
+ } = useStopwatch({ interval });
+
+
+ return (
+
+
UseStopwatch Demo
+
+ Start
+ Pause
+ reset()}>Reset
+
+ );
+}
diff --git a/demo/components/UseTimeDemo.tsx b/demo/components/UseTimeDemo.tsx
new file mode 100644
index 0000000..db1d46b
--- /dev/null
+++ b/demo/components/UseTimeDemo.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTime } from '../../src/index';
+import TimerStyled from './TimerStyled';
+
+export default function UseTimeDemo({ interval }: { interval: number}) {
+ const {
+ milliseconds,
+ seconds,
+ minutes,
+ hours,
+ } = useTime({ interval });
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/demo/components/UseTimerDemo.tsx b/demo/components/UseTimerDemo.tsx
new file mode 100644
index 0000000..24381cb
--- /dev/null
+++ b/demo/components/UseTimerDemo.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTimer } from '../../src/index';
+import TimerStyled from './TimerStyled';
+import Button from './Button';
+
+export default function UseTimerDemo({ expiryTimestamp, interval }: { expiryTimestamp: Date, interval: number}) {
+ const {
+ milliseconds,
+ seconds,
+ minutes,
+ hours,
+ days,
+ start,
+ pause,
+ resume,
+ restart,
+ } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called'), interval });
+
+ return (
+
+
UseTimer Demo
+
+ Start
+ Pause
+ Resume
+ {
+ // Restarts to 10 minutes timer
+ const time = new Date();
+ time.setSeconds(time.getSeconds() + 600);
+ restart(time);
+ }}
+ >
+ Restart
+
+
+ );
+}
\ No newline at end of file
diff --git a/index.html b/demo/index.html
similarity index 64%
rename from index.html
rename to demo/index.html
index 1e14a13..9beebf6 100644
--- a/index.html
+++ b/demo/index.html
@@ -10,6 +10,6 @@
-
+