[pull] master from amrlabib:master

.npmignore

@@ -5,9 +5,8 @@ build
 !.eslintrc
 yarn-error.log
 dev-dist
-readme-images
-
+docs
+demo
 *.js
-!dist/index.js
-
+!dist/**/*
 *.html

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 (
+    <div>
+      <GlobalStyle />
+      <HeaderBG>
+        <Container>
+          <Header>
+            <H1>react-timer-hook</H1>
+            <div>
+              <iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="160" height="30" title="GitHub" />
+              <iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=fork&count=true&size=large" frameBorder="0" scrolling="0" width="126" height="30" title="GitHub" />
+            </div>
+          </Header>
+        </Container>
+      </HeaderBG>
+      <Container>
+        <p>
+          React timer hook is a custom <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank">react hook</a> built to handle timer, stopwatch, and time logic/state in your react component.
+        </p>
+        <UseTimerDemo expiryTimestamp={time} interval={20} />
+        <Separator />
+        <UseStopwatchDemo interval={20} />
+        <Separator />
+        <UseTimeDemo interval={20} />
+      </Container>
+    </div>
+  );
+}

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;

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 (
+    <Container>
+      <Title>{title}</Title>
+      <DigitContainer>
+        {isMIlliseconds ?
+          <>
+            <SingleDigit>
+              {digits[0]}
+            </SingleDigit>
+            <SingleDigit>
+              {digits[1]}
+            </SingleDigit>
+          </>
+          : 
+          null
+        }
+        <SingleDigit>
+          {digits[2]}
+        </SingleDigit>
+        <SingleDigit>
+          {digits[3]}
+        </SingleDigit>
+      </DigitContainer>
+    </Container>
+  );
+}

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 (
+    <TimerContainer>
+      {days !== undefined ? <Digit value={days} title="DAYS" /> : null}
+      {days !== undefined ? (<SepartorContainer><Separtor /><Separtor /></SepartorContainer>): null}
+      <Digit value={hours} title="HOURS" />
+      <SepartorContainer><Separtor /><Separtor /></SepartorContainer>
+      <Digit value={minutes} title="MINUTES" />
+      <SepartorContainer><Separtor /><Separtor /></SepartorContainer>
+      <Digit value={seconds} title="SECONDS" />
+      {enableMilliseconds ? 
+        <>
+          <SepartorContainer><Separtor /><Separtor /></SepartorContainer>
+          <Digit value={milliseconds} title="MILLISECONDS" isMIlliseconds />
+        </>
+        : null }
+    </TimerContainer>
+  );
+}

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 (
+    <div>
+      <h2>UseStopwatch Demo</h2>
+      <TimerStyled milliseconds={milliseconds} seconds={seconds} minutes={minutes} hours={hours} days={days} enableMilliseconds={interval < 1000} />
+      <Button onClick={start}>Start</Button>
+      <Button onClick={pause}>Pause</Button>
+      <Button onClick={() => reset()}>Reset</Button>
+    </div>
+  );
+}

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 (
+    <div>
+      <h2>UseTime Demo</h2>
+      <div>
+        <TimerStyled milliseconds={milliseconds} seconds={seconds} minutes={minutes} hours={hours} enableMilliseconds={interval < 1000} />
+      </div>
+    </div>
+  );
+}