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} -
- - - - -
- ); -} - -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

+
+