From 0a7f180bc0ac8a7d8bc6bf8a3a5112bf4a546a13 Mon Sep 17 00:00:00 2001 From: Amr Labib Date: Thu, 24 Dec 2020 19:56:56 +0200 Subject: [PATCH 1/3] support offset time in useStopwatch --- docs/index.js | 6 +++--- readme.md | 3 ++- src/index.d.ts | 1 + src/useStopwatch.js | 8 ++++---- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/index.js b/docs/index.js index 02f5b65..c59e172 100644 --- a/docs/index.js +++ b/docs/index.js @@ -94,7 +94,7 @@ /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _templateObject = _taggedTemplateLiteral(['\\n html, body {\\n margin: 0;\\n font-family: Arial;\\n text-align: left;\\n color: #404549;\\n }\\n h2 {\\n margin-top: 20px;\\n }\\n'], ['\\n html, body {\\n margin: 0;\\n font-family: Arial;\\n text-align: left;\\n color: #404549;\\n }\\n h2 {\\n margin-top: 20px;\\n }\\n']),\n _templateObject2 = _taggedTemplateLiteral(['\\n width: 1170px;\\n margin-left: auto;\\n margin-right: auto;\\n'], ['\\n width: 1170px;\\n margin-left: auto;\\n margin-right: auto;\\n']),\n _templateObject3 = _taggedTemplateLiteral(['\\n background-color: #404549;\\n'], ['\\n background-color: #404549;\\n']),\n _templateObject4 = _taggedTemplateLiteral(['\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n & h1 {\\n margin: 20px 0;\\n }\\n'], ['\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n & h1 {\\n margin: 20px 0;\\n }\\n']),\n _templateObject5 = _taggedTemplateLiteral(['\\n color: white;\\n'], ['\\n color: white;\\n']),\n _templateObject6 = _taggedTemplateLiteral(['\\n height: 0px;\\n margin-top: 30px;\\n border: dashed 2px #404549;\\n'], ['\\n height: 0px;\\n margin-top: 30px;\\n border: dashed 2px #404549;\\n']);\n\nexports.default = App;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _styledComponents = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n\nvar _styledComponents2 = _interopRequireDefault(_styledComponents);\n\nvar _UseTimerDemo = __webpack_require__(/*! ./components/UseTimerDemo */ \"./demo/components/UseTimerDemo.js\");\n\nvar _UseTimerDemo2 = _interopRequireDefault(_UseTimerDemo);\n\nvar _UseStopwatchDemo = __webpack_require__(/*! ./components/UseStopwatchDemo */ \"./demo/components/UseStopwatchDemo.js\");\n\nvar _UseStopwatchDemo2 = _interopRequireDefault(_UseStopwatchDemo);\n\nvar _UseTimeDemo = __webpack_require__(/*! ./components/UseTimeDemo */ \"./demo/components/UseTimeDemo.js\");\n\nvar _UseTimeDemo2 = _interopRequireDefault(_UseTimeDemo);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nvar GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject);\n\nvar Container = _styledComponents2.default.div(_templateObject2);\n\nvar HeaderBG = _styledComponents2.default.div(_templateObject3);\n\nvar Header = _styledComponents2.default.div(_templateObject4);\n\nvar H1 = _styledComponents2.default.h1(_templateObject5);\n\nvar Separator = _styledComponents2.default.div(_templateObject6);\n\nfunction App() {\n var time = new Date();\n time.setSeconds(time.getSeconds() + 600); // 10 minutes timer\n return _react2.default.createElement(\n 'div',\n null,\n _react2.default.createElement(GlobalStyle, null),\n _react2.default.createElement(\n HeaderBG,\n null,\n _react2.default.createElement(\n Container,\n null,\n _react2.default.createElement(\n Header,\n null,\n _react2.default.createElement(\n H1,\n null,\n 'react-timer-hook'\n ),\n _react2.default.createElement(\n 'div',\n null,\n _react2.default.createElement('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' }),\n _react2.default.createElement('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' })\n )\n )\n )\n ),\n _react2.default.createElement(\n Container,\n null,\n _react2.default.createElement(\n 'p',\n null,\n 'React timer hook is a custom ',\n _react2.default.createElement(\n 'a',\n { href: 'https://reactjs.org/docs/hooks-intro.html', target: '_blank' },\n 'react hook'\n ),\n ' built to handle timer, stopwatch, and time logic/state in your react component.'\n ),\n _react2.default.createElement(_UseTimerDemo2.default, { expiryTimestamp: time }),\n _react2.default.createElement(Separator, null),\n _react2.default.createElement(_UseStopwatchDemo2.default, null),\n _react2.default.createElement(Separator, null),\n _react2.default.createElement(_UseTimeDemo2.default, null)\n )\n );\n}\n\n//# sourceURL=webpack:///./demo/App.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _templateObject = _taggedTemplateLiteral(['\\n html, body {\\n margin: 0;\\n font-family: Arial;\\n text-align: left;\\n color: #404549;\\n }\\n h2 {\\n margin-top: 20px;\\n }\\n'], ['\\n html, body {\\n margin: 0;\\n font-family: Arial;\\n text-align: left;\\n color: #404549;\\n }\\n h2 {\\n margin-top: 20px;\\n }\\n']),\n _templateObject2 = _taggedTemplateLiteral(['\\n width: 1170px;\\n margin-left: auto;\\n margin-right: auto;\\n'], ['\\n width: 1170px;\\n margin-left: auto;\\n margin-right: auto;\\n']),\n _templateObject3 = _taggedTemplateLiteral(['\\n background-color: #404549;\\n'], ['\\n background-color: #404549;\\n']),\n _templateObject4 = _taggedTemplateLiteral(['\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n & h1 {\\n margin: 20px 0;\\n }\\n'], ['\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n & h1 {\\n margin: 20px 0;\\n }\\n']),\n _templateObject5 = _taggedTemplateLiteral(['\\n color: white;\\n'], ['\\n color: white;\\n']),\n _templateObject6 = _taggedTemplateLiteral(['\\n height: 0px;\\n margin-top: 30px;\\n border: dashed 2px #404549;\\n'], ['\\n height: 0px;\\n margin-top: 30px;\\n border: dashed 2px #404549;\\n']);\n\nexports.default = App;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _styledComponents = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n\nvar _styledComponents2 = _interopRequireDefault(_styledComponents);\n\nvar _UseTimerDemo = __webpack_require__(/*! ./components/UseTimerDemo */ \"./demo/components/UseTimerDemo.js\");\n\nvar _UseTimerDemo2 = _interopRequireDefault(_UseTimerDemo);\n\nvar _UseStopwatchDemo = __webpack_require__(/*! ./components/UseStopwatchDemo */ \"./demo/components/UseStopwatchDemo.js\");\n\nvar _UseStopwatchDemo2 = _interopRequireDefault(_UseStopwatchDemo);\n\nvar _UseTimeDemo = __webpack_require__(/*! ./components/UseTimeDemo */ \"./demo/components/UseTimeDemo.js\");\n\nvar _UseTimeDemo2 = _interopRequireDefault(_UseTimeDemo);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nvar GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject);\n\nvar Container = _styledComponents2.default.div(_templateObject2);\n\nvar HeaderBG = _styledComponents2.default.div(_templateObject3);\n\nvar Header = _styledComponents2.default.div(_templateObject4);\n\nvar H1 = _styledComponents2.default.h1(_templateObject5);\n\nvar Separator = _styledComponents2.default.div(_templateObject6);\n\nfunction App() {\n var time = new Date();\n time.setSeconds(time.getSeconds() + 600); // 10 minutes timer\n\n var stopwatchOffset = new Date();\n stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300); // 5 minutes offset\n return _react2.default.createElement(\n 'div',\n null,\n _react2.default.createElement(GlobalStyle, null),\n _react2.default.createElement(\n HeaderBG,\n null,\n _react2.default.createElement(\n Container,\n null,\n _react2.default.createElement(\n Header,\n null,\n _react2.default.createElement(\n H1,\n null,\n 'react-timer-hook'\n ),\n _react2.default.createElement(\n 'div',\n null,\n _react2.default.createElement('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' }),\n _react2.default.createElement('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' })\n )\n )\n )\n ),\n _react2.default.createElement(\n Container,\n null,\n _react2.default.createElement(\n 'p',\n null,\n 'React timer hook is a custom ',\n _react2.default.createElement(\n 'a',\n { href: 'https://reactjs.org/docs/hooks-intro.html', target: '_blank' },\n 'react hook'\n ),\n ' built to handle timer, stopwatch, and time logic/state in your react component.'\n ),\n _react2.default.createElement(_UseTimerDemo2.default, { expiryTimestamp: time }),\n _react2.default.createElement(Separator, null),\n _react2.default.createElement(_UseStopwatchDemo2.default, { offsetTimestamp: stopwatchOffset }),\n _react2.default.createElement(Separator, null),\n _react2.default.createElement(_UseTimeDemo2.default, null)\n )\n );\n}\n\n//# sourceURL=webpack:///./demo/App.js?"); /***/ }), @@ -142,7 +142,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = UseStopwatchDemo;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _index = __webpack_require__(/*! ../../src/index */ \"./src/index.js\");\n\nvar _Button = __webpack_require__(/*! ./Button */ \"./demo/components/Button.js\");\n\nvar _Button2 = _interopRequireDefault(_Button);\n\nvar _TimerStyled = __webpack_require__(/*! ./TimerStyled */ \"./demo/components/TimerStyled.js\");\n\nvar _TimerStyled2 = _interopRequireDefault(_TimerStyled);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction UseStopwatchDemo() {\n var _useStopwatch = (0, _index.useStopwatch)({ autoStart: true }),\n seconds = _useStopwatch.seconds,\n minutes = _useStopwatch.minutes,\n hours = _useStopwatch.hours,\n days = _useStopwatch.days,\n start = _useStopwatch.start,\n pause = _useStopwatch.pause,\n reset = _useStopwatch.reset;\n\n return _react2.default.createElement(\n 'div',\n null,\n _react2.default.createElement(\n 'h2',\n null,\n 'UseStopwatch Demo'\n ),\n _react2.default.createElement(_TimerStyled2.default, { seconds: seconds, minutes: minutes, hours: hours, days: days }),\n _react2.default.createElement(\n _Button2.default,\n { onClick: start },\n 'Start'\n ),\n _react2.default.createElement(\n _Button2.default,\n { onClick: pause },\n 'Pause'\n ),\n _react2.default.createElement(\n _Button2.default,\n { onClick: reset },\n 'Reset'\n )\n );\n}\n\n//# sourceURL=webpack:///./demo/components/UseStopwatchDemo.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = UseStopwatchDemo;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _index = __webpack_require__(/*! ../../src/index */ \"./src/index.js\");\n\nvar _Button = __webpack_require__(/*! ./Button */ \"./demo/components/Button.js\");\n\nvar _Button2 = _interopRequireDefault(_Button);\n\nvar _TimerStyled = __webpack_require__(/*! ./TimerStyled */ \"./demo/components/TimerStyled.js\");\n\nvar _TimerStyled2 = _interopRequireDefault(_TimerStyled);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction UseStopwatchDemo(_ref) {\n var offsetTimestamp = _ref.offsetTimestamp;\n\n var _useStopwatch = (0, _index.useStopwatch)({ autoStart: true, offsetTimestamp: offsetTimestamp }),\n seconds = _useStopwatch.seconds,\n minutes = _useStopwatch.minutes,\n hours = _useStopwatch.hours,\n days = _useStopwatch.days,\n start = _useStopwatch.start,\n pause = _useStopwatch.pause,\n reset = _useStopwatch.reset;\n\n return _react2.default.createElement(\n 'div',\n null,\n _react2.default.createElement(\n 'h2',\n null,\n 'UseStopwatch Demo'\n ),\n _react2.default.createElement(_TimerStyled2.default, { seconds: seconds, minutes: minutes, hours: hours, days: days }),\n _react2.default.createElement(\n _Button2.default,\n { onClick: start },\n 'Start'\n ),\n _react2.default.createElement(\n _Button2.default,\n { onClick: pause },\n 'Pause'\n ),\n _react2.default.createElement(\n _Button2.default,\n { onClick: function onClick() {\n var stopwatchOffset = new Date();\n stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300); // 5 minutes offset\n reset(stopwatchOffset);\n } },\n 'Reset'\n )\n );\n}\n\n//# sourceURL=webpack:///./demo/components/UseStopwatchDemo.js?"); /***/ }), @@ -463,7 +463,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nexports.default = useStopwatch;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/utils/index.js\");\n\nfunction useStopwatch(settings) {\n var _ref = settings || {},\n autoStart = _ref.autoStart;\n\n var _useState = (0, _react.useState)(0),\n _useState2 = _slicedToArray(_useState, 2),\n seconds = _useState2[0],\n setSeconds = _useState2[1];\n\n var _useState3 = (0, _react.useState)(autoStart),\n _useState4 = _slicedToArray(_useState3, 2),\n isRunning = _useState4[0],\n setIsRunning = _useState4[1];\n\n var intervalRef = (0, _react.useRef)();\n\n function clearIntervalRef() {\n if (intervalRef.current) {\n setIsRunning(false);\n clearInterval(intervalRef.current);\n intervalRef.current = undefined;\n }\n }\n\n function start() {\n if (!intervalRef.current) {\n setIsRunning(true);\n intervalRef.current = setInterval(function () {\n return setSeconds(function (prevSeconds) {\n return prevSeconds + 1;\n });\n }, 1000);\n }\n }\n\n function pause() {\n clearIntervalRef();\n }\n\n function reset() {\n clearIntervalRef();\n setSeconds(0);\n if (autoStart) {\n start();\n }\n }\n\n // didMount effect\n (0, _react.useEffect)(function () {\n if (autoStart) {\n start();\n }\n return clearIntervalRef;\n }, []);\n\n return _extends({}, _utils.Time.getTimeFromSeconds(seconds), { start: start, pause: pause, reset: reset, isRunning: isRunning\n });\n}\n\n//# sourceURL=webpack:///./src/useStopwatch.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nexports.default = useStopwatch;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./src/utils/index.js\");\n\nfunction useStopwatch(settings) {\n var _ref = settings || {},\n autoStart = _ref.autoStart,\n offsetTimestamp = _ref.offsetTimestamp;\n\n var _useState = (0, _react.useState)(_utils.Time.getSecondsFromExpiry(offsetTimestamp) || 0),\n _useState2 = _slicedToArray(_useState, 2),\n seconds = _useState2[0],\n setSeconds = _useState2[1];\n\n var _useState3 = (0, _react.useState)(autoStart),\n _useState4 = _slicedToArray(_useState3, 2),\n isRunning = _useState4[0],\n setIsRunning = _useState4[1];\n\n var intervalRef = (0, _react.useRef)();\n\n function clearIntervalRef() {\n if (intervalRef.current) {\n setIsRunning(false);\n clearInterval(intervalRef.current);\n intervalRef.current = undefined;\n }\n }\n\n function start() {\n if (!intervalRef.current) {\n setIsRunning(true);\n intervalRef.current = setInterval(function () {\n return setSeconds(function (prevSeconds) {\n return prevSeconds + 1;\n });\n }, 1000);\n }\n }\n\n function pause() {\n clearIntervalRef();\n }\n\n function reset(offset) {\n clearIntervalRef();\n setSeconds(_utils.Time.getSecondsFromExpiry(offset || 0));\n if (autoStart) {\n start();\n }\n }\n\n // didMount effect\n (0, _react.useEffect)(function () {\n if (autoStart) {\n start();\n }\n return clearIntervalRef;\n }, []);\n\n return _extends({}, _utils.Time.getTimeFromSeconds(seconds), { start: start, pause: pause, reset: reset, isRunning: isRunning\n });\n}\n\n//# sourceURL=webpack:///./src/useStopwatch.js?"); /***/ }), diff --git a/readme.md b/readme.md index b0b08ed..6413e0b 100644 --- a/readme.md +++ b/readme.md @@ -142,6 +142,7 @@ export default function App() { | key | Type | Required | Description | | --- | --- | --- | ---- | | autoStart | boolean | No | if set to `true` stopwatch will auto start | +| offsetTimestamp | number | No | this will define the initial stopwatch offset example: `const stopwatchOffset = new Date(); stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300);` this is 5 minutes offset it will cause stopwatch start from 5 minutes and then start counting up | ### Values @@ -154,7 +155,7 @@ export default function App() { | isRunning | boolean | flag to indicate if stopwatch is running or not | | start | function | function to be called to start/resume stopwatch | | pause | function | function to be called to pause stopwatch | -| reset | function | function to be called to reset stopwatch to 0:0:0:0 | +| reset | function | function to be called to reset stopwatch to 0:0:0:0, you can also pass offset parameter to this function to reset stopwatch with offset, similar to how `offsetTimestamp` will offset the initial stopwatch time | --- diff --git a/src/index.d.ts b/src/index.d.ts index 54a47c5..c617841 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -19,6 +19,7 @@ export function useTimer(settings: TimerSettings): TimerResult interface StopwatchSettings { autoStart?: boolean; + offsetTimestamp?: number; } interface StopwatchResult { diff --git a/src/useStopwatch.js b/src/useStopwatch.js index 486544e..a92233c 100644 --- a/src/useStopwatch.js +++ b/src/useStopwatch.js @@ -2,9 +2,9 @@ import { useState, useEffect, useRef } from 'react'; import { Time } from './utils'; export default function useStopwatch(settings) { - const { autoStart } = settings || {}; + const { autoStart, offsetTimestamp } = settings || {}; - const [seconds, setSeconds] = useState(0); + const [seconds, setSeconds] = useState(Time.getSecondsFromExpiry(offsetTimestamp || 0)); const [isRunning, setIsRunning] = useState(autoStart); const intervalRef = useRef(); @@ -27,9 +27,9 @@ export default function useStopwatch(settings) { clearIntervalRef(); } - function reset() { + function reset(offset: number) { clearIntervalRef(); - setSeconds(0); + setSeconds(Time.getSecondsFromExpiry(offset || 0)); if (autoStart) { start(); } From 2c22cdd40c810b25f64de923bc921fb721e1d66b Mon Sep 17 00:00:00 2001 From: Amr Labib Date: Thu, 24 Dec 2020 20:00:52 +0200 Subject: [PATCH 2/3] readme update --- readme.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 6413e0b..dc94869 100644 --- a/readme.md +++ b/readme.md @@ -142,7 +142,9 @@ export default function App() { | key | Type | Required | Description | | --- | --- | --- | ---- | | autoStart | boolean | No | if set to `true` stopwatch will auto start | -| offsetTimestamp | number | No | this will define the initial stopwatch offset example: `const stopwatchOffset = new Date(); stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300);` this is 5 minutes offset it will cause stopwatch start from 5 minutes and then start counting up | +| offsetTimestamp | number | No | this will define the initial stopwatch offset example: +`const stopwatchOffset = new Date(); stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300);` +this will result in a 5 minutes offset and stopwatch will start from 0:0:5:0 instead of 0:0:0:0 | ### Values From bdc0b38002ada1e7ae1cb94bd1cd94f5d3a6ecb4 Mon Sep 17 00:00:00 2001 From: Amr Labib Date: Thu, 24 Dec 2020 20:02:05 +0200 Subject: [PATCH 3/3] readme update --- readme.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/readme.md b/readme.md index dc94869..f747d2a 100644 --- a/readme.md +++ b/readme.md @@ -142,9 +142,7 @@ export default function App() { | key | Type | Required | Description | | --- | --- | --- | ---- | | autoStart | boolean | No | if set to `true` stopwatch will auto start | -| offsetTimestamp | number | No | this will define the initial stopwatch offset example: -`const stopwatchOffset = new Date(); stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300);` -this will result in a 5 minutes offset and stopwatch will start from 0:0:5:0 instead of 0:0:0:0 | +| offsetTimestamp | number | No | this will define the initial stopwatch offset example: `const stopwatchOffset = new Date(); stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300);` this will result in a 5 minutes offset and stopwatch will start from 0:0:5:0 instead of 0:0:0:0 | ### Values