{"_id":"@amplication/react-compound-timer","_rev":"11-01cbb455d5eaf07ed2b4b52a64cba79f","name":"@amplication/react-compound-timer","dist-tags":{"latest":"2.1.0"},"versions":{"2.1.0":{"name":"@amplication/react-compound-timer","version":"2.1.0","keywords":["react","timer","countdown","compound","stopwatch"],"author":{"url":"https://volkov97.com","name":"German Volkov","email":"Volkov.german.1997@gmail.com"},"license":"ISC","_id":"@amplication/react-compound-timer@2.1.0","maintainers":[{"name":"arielweinberger","email":"weinberger.ariel@gmail.com"},{"name":"tupe12334","email":"ofek@amplication.com"},{"name":"amitbarletz","email":"amit@amplication.com"},{"name":"eugene.tseitlin","email":"eugene@amplication.com"},{"name":"yuvalhazaz","email":"hazaz.yuval@gmail.com"}],"homepage":"https://github.com/the-black-viper/react-compound-timer","dist":{"shasum":"67817df6ba0bb3ee22a00e11e460d154b657a5eb","tarball":"https://registry.npmjs.org/@amplication/react-compound-timer/-/react-compound-timer-2.1.0.tgz","fileCount":52,"integrity":"sha512-Wgbe0YFYTolq1PqIYxaRNqZL6LkpS7Ih6SmJbSb21cCOaVyFFGQHKeYXnITtaAhcOfukpkscwJtsK+fTlbjrLA==","signatures":[{"sig":"MEUCIEbpVWqHVi0h91b+BYiafr2m/NaKq0PXOFIhwA0ID2X7AiEAlqIFmfRXxG7fJ8pWSNTFpS17UZcJEbnfn5HRPFMKS+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbWVzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJSBAAkSySpVVjdMAKSzkDDKdo2BrIuQ/xgxoQQXZyviEA1fYYBa/R\r\nRZ+8YEgj7z1aAT2ulgMTsQmH8lYq0hf5rAReQTAMtcqNMM7EPxJ7jWzPaj2T\r\nEKnQ2Fxsp4KxtlgkfdNC9RpdIDSONDFNb+HoerlznVVbcBuNJknNP06ckF/p\r\nUIsXTWAUWqUHoMtZa6fohukZA8bFf/CcabvqZVQovFE+3HCJoAymeP3cUIHF\r\nFvtq+M9SVGvRqjksprPSQvmAAcgDDkIiz0+c1YuueF3dHwdcU6pAJ09+55y5\r\ny6AI1x62l28lo6XT8MbY7x9B9K0FqXvcyla9xY/OlaHVXXdK8dzReZjJ0ZoT\r\nHZEvKVt9L9vJskslXkoitwTDFVrswPtCRo1pF2+iMCncFDQWJ2aKFkYJBWdR\r\nrGszgjVqCYZt+fO/hz84tCjvp6xcgL4Zwk3k3AarqHgR+PDrCKQrjwzeVgpD\r\nQIsui8qqb8VJWuLv1JDkAYFVo+tbIXWlb6gTW3nadnLBLDf2vol3xkQtD4+o\r\nnmDmPv1lifE6dQ5X1kiPwenL4BnRgs5ctolQcb+rAjdGnUV8pNpCNfFcXUf0\r\nCWUAHFFzXhaB9cbwqNT5wehuA5YZZ4ror2WfErHBROzL+LTRnc0mAr8Qkk2a\r\nhIBAl4vwXzPThAg/Auo09Y1C/o+BvQr1LXE=\r\n=1OGi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build","types":"build","gitHead":"401dc45d82d448c3c0be04b806637607b58075c2","scripts":{"test":"jest","build":"npx styleguidist build","start":"npx styleguidist server","transpile":"tsc","prepublishOnly":"npm run transpile"},"_npmUser":{"name":"arielweinberger","email":"weinberger.ariel@gmail.com"},"_npmVersion":"8.15.0","description":"Timer compound react component","directories":{},"_nodeVersion":"16.17.1","_hasShrinkwrap":false,"devDependencies":{"jest":"^27.2.5","eslint":"^7.32.0","ts-jest":"^27.0.5","webpack":"^5.48.0","react-dom":"^18.2.0","ts-loader":"^9.2.6","typescript":"^4.4.3","@types/jest":"^27.0.2","file-loader":"^6.2.0","webpack-cli":"^4.7.2","@types/react":"^18.0.15","@types/react-dom":"^18.0.6","react-styleguidist":"^13.0.0","webpack-dev-server":"^4.3.1","html-webpack-plugin":"^5.3.2","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","react-docgen-typescript":"^2.1.1","eslint-config-ts-react-important-stuff":"^3.0.0"},"peerDependencies":{"react":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-compound-timer_2.1.0_1668113779181_0.661600802270486","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-11-10T20:56:19.121Z","modified":"2024-09-09T13:32:51.152Z","2.1.0":"2022-11-10T20:56:19.411Z"},"author":{"url":"https://volkov97.com","name":"German Volkov","email":"Volkov.german.1997@gmail.com"},"license":"ISC","homepage":"https://github.com/the-black-viper/react-compound-timer","keywords":["react","timer","countdown","compound","stopwatch"],"description":"Timer compound react component","maintainers":[{"email":"engineering@amplication.com","name":"amplication-bot"},{"email":"muly@amplication.com","name":"mulygottlieb"},{"email":"vanNoort.levi@protonmail.com","name":"levivannoort"},{"email":"mor@amplication.com","name":"morhag"},{"email":"hazaz.yuval@gmail.com","name":"yuvalhazaz"}],"readme":"# react-compound-timerv2\n\n### About\n\nThis is a forked version of the original [react-compound-timer](https://volkov97.github.io/react-compound-timer/) compatible with React 17.\n\n---\n\nTimer compound component for react and react-native to make building timers less painfull.\nIt incapsulates all timer logic - you should only think about rendering!\n\n[See Working Examples](https://volkov97.github.io/react-compound-timer/)\n\n### Forward Count\n\nJust render a simple timer and start counting forward from 0. Use compound components to render time units.\nYou can see all avaliable time units in this example.\n\n```jsx\n<Timer>\n  <Timer.Days /> days\n  <Timer.Hours /> hours\n  <Timer.Minutes /> minutes\n  <Timer.Seconds /> seconds\n  <Timer.Milliseconds /> milliseconds\n</Timer>\n```\n\n### Backward Count\n\nThe same simple timer, but counting backward.\n\n```jsx\n<Timer initialTime={55000} direction=\"backward\">\n  {() => (\n    <React.Fragment>\n      <Timer.Days /> days\n      <Timer.Hours /> hours\n      <Timer.Minutes /> minutes\n      <Timer.Seconds /> seconds\n      <Timer.Milliseconds /> milliseconds\n    </React.Fragment>\n  )}\n</Timer>\n```\n\n### Controls\n\nGet action functions from props and use them to control your timer.\n\n```jsx\n<Timer initialTime={55000}>\n  {({ start, resume, pause, stop, reset, timerState }) => (\n    <React.Fragment>\n      <div>\n        <Timer.Days /> days\n        <Timer.Hours /> hours\n        <Timer.Minutes /> minutes\n        <Timer.Seconds /> seconds\n        <Timer.Milliseconds /> milliseconds\n      </div>\n      <div>{timerState}</div>\n      <br />\n      <div>\n        <button onClick={start}>Start</button>\n        <button onClick={pause}>Pause</button>\n        <button onClick={resume}>Resume</button>\n        <button onClick={stop}>Stop</button>\n        <button onClick={reset}>Reset</button>\n      </div>\n    </React.Fragment>\n  )}\n</Timer>\n```\n\n### No autoplay\n\nYou can just render a timer, and then start it only by using action function 'start' from props.\n\n```jsx\n<Timer initialTime={55000} startImmediately={false}>\n  {({ start, resume, pause, stop, reset, timerState }) => (\n    <React.Fragment>\n      <div>\n        <Timer.Days /> days\n        <Timer.Hours /> hours\n        <Timer.Minutes /> minutes\n        <Timer.Seconds /> seconds\n        <Timer.Milliseconds /> milliseconds\n      </div>\n      <div>{timerState}</div>\n      <br />\n      <div>\n        <button onClick={start}>Start</button>\n        <button onClick={pause}>Pause</button>\n        <button onClick={resume}>Resume</button>\n        <button onClick={stop}>Stop</button>\n        <button onClick={reset}>Reset</button>\n      </div>\n    </React.Fragment>\n  )}\n</Timer>\n```\n\n### With hooks\n\nWrite your own hooks on timer actions.\n\n```jsx\n<Timer\n  initialTime={55000}\n  startImmediately={false}\n  onStart={() => console.log(\"onStart hook\")}\n  onResume={() => console.log(\"onResume hook\")}\n  onPause={() => console.log(\"onPause hook\")}\n  onStop={() => console.log(\"onStop hook\")}\n  onReset={() => console.log(\"onReset hook\")}\n>\n  {({ start, resume, pause, stop, reset, timerState }) => (\n    <React.Fragment>\n      <div>\n        <Timer.Days /> days\n        <Timer.Hours /> hours\n        <Timer.Minutes /> minutes\n        <Timer.Seconds /> seconds\n        <Timer.Milliseconds /> milliseconds\n      </div>\n      <div>{timerState}</div>\n      <br />\n      <div>\n        <button onClick={start}>Start</button>\n        <button onClick={pause}>Pause</button>\n        <button onClick={resume}>Resume</button>\n        <button onClick={stop}>Stop</button>\n        <button onClick={reset}>Reset</button>\n      </div>\n    </React.Fragment>\n  )}\n</Timer>\n```\n\n### Last Unit Property\n\nControl your last unit. For example, 1 minute 30 seconds can be 90 seconds, if you set lastUnit as 'seconds'.\nIt means that minutes, hours and days will not be computed.\n\n```jsx\n<Timer initialTime={60000 * 60 * 48 + 5000} lastUnit=\"h\" direction=\"backward\">\n  {() => (\n    <React.Fragment>\n      <Timer.Days /> days\n      <Timer.Hours /> hours\n      <Timer.Minutes /> minutes\n      <Timer.Seconds /> seconds\n      <Timer.Milliseconds /> milliseconds\n    </React.Fragment>\n  )}\n</Timer>\n```\n\n### With checkpoints\n\nIf you need to call some functions on certain time - provide checkpoints property. It is an array of objects.\nEach object contains time and callback, that will be fired, when timer intersects checkpoint's time.\n\n```jsx\n<Timer\n  initialTime={60000 * 60 * 48 + 5000}\n  direction=\"backward\"\n  checkpoints={[\n    {\n      time: 60000 * 60 * 48,\n      callback: () => console.log(\"Checkpoint A\"),\n    },\n    {\n      time: 60000 * 60 * 48 - 5000,\n      callback: () => console.log(\"Checkpoint B\"),\n    },\n  ]}\n>\n  {() => (\n    <React.Fragment>\n      <Timer.Days /> days\n      <Timer.Hours /> hours\n      <Timer.Minutes /> minutes\n      <Timer.Seconds /> seconds\n      <Timer.Milliseconds /> milliseconds\n    </React.Fragment>\n  )}\n</Timer>\n```\n\n## React Native\n\nTimer compound component also works for react-native applications. All you have to do is wrap the elements in a <Text> tag from react-native.\n\n### Countdown example with milliseconds\n\n```jsx\nimport { View, Text } from \"react-native\";\nimport Timer from \"react-compound-timer\";\n\n<View style={{ flex: 1, justifyContent: \"center\", alignItems: \"center\" }}>\n  <Timer\n    initialTime={60 * 1000}\n    direction=\"backward\"\n    timeToUpdate={10}\n    checkpoints={[\n      {\n        time: 0,\n        callback: () => alert(\"countdown finished\"),\n      },\n    ]}\n  >\n    <Text style={{ fontFamily: \"Helvetica Neue\" }}>\n      <Text style={{ fontSize: 32 }}>\n        <Timer.Seconds />\n      </Text>\n      <Text style={{ fontSize: 12 }}>\n        <Timer.Milliseconds />\n      </Text>\n    </Text>\n  </Timer>\n</View>;\n```\n","readmeFilename":"README.md"}