{"_id":"@abucarub/react-circle-countdown","_rev":"3-ca0a4eba04197a985e81d26774eb8b8d","name":"@abucarub/react-circle-countdown","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@abucarub/react-circle-countdown","version":"1.0.0","description":"React Circle Countdown","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"keywords":[],"author":"","license":"ISC","dependencies":{},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"@types/react":"^17.0.0","@types/react-dom":"^17.0.0","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.1","react-dom":"^17.0.1","rollup":"^2.35.1","rollup-plugin-sass":"^1.2.2","rollup-plugin-typescript2":"^0.29.0","typescript":"^4.1.3"},"gitHead":"d252ecf96cce6ed5dfb221a47ae3585bb6b5d503","_id":"@abucarub/react-circle-countdown@1.0.0","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-lOlclaC5fI+AVFGuH2Nn6jUFp78QK11EIuQwRcSU0pgY9aMYMlo+gdjBm6avGPMiPvyYk7BYRwFMw36mpSOQtA==","shasum":"ec2597403f22761da245804b026a7c2a44a92b28","tarball":"https://registry.npmjs.org/@abucarub/react-circle-countdown/-/react-circle-countdown-1.0.0.tgz","fileCount":5,"unpackedSize":15681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2QnuCRA9TVsSAnZWagAA95MP/17RqbjNSXufx/l4+/Rz\nOgdDxtgkCW5V0OXMObR5xzGQ3WuLVhWTJBVrOHdAz7Zef6TY3AITtIscuL8c\nYvgEr8O1kLIKMfjXJ80S/c7Jlv8kfQbSqHPlu+UWLTNw3y5w/7mv/j7iWe5I\nEJOwNP3jtI6cAQB1EVWBet4umULwx3Kg63/z+Deli61oK4LokA2PcstJSULn\nOzSWYriZG57SFW96qMDIybBPpCepTWaeOvFZ33cHLeV3I+tye7zmgsHR4Xgt\neMmYa1Dj0jbyYGFCD0X5O/4t/cV0YBu370Woj/3+yjOrpIpCy7TmbYHB+Q+r\nCjIbTbeTYVuFGja0lwhTJUR3ul9NC9SRmTZ1YiB5WJWyW1YQQHsCbG3GwQpb\nucTrEPjMbM2eEVhp+9nfJERfhOnoV222/mYnFEiO4DIxf4odN/CZD5X8fxrY\ncb501f45WV3krSHo6FdzM1LtyCi8Z+cs/HVL2q7YYeC9jZvPPpq8dt2nO/OC\n4JLnElx0DgL6RJk4zeX44wXSz9WmWkN7Ss/Mj25DVFNyZFr60lmkfHHqudYU\nPWY+3CVX1/ZpsngEG4JQ3qMQSggytC8D8vcxrA7qcvseUiboqQcKyTm7Ueo4\nW+AKk/qgPlTlXqZCczNy5atObhma7jKPY/U1mfPHj8j25c+8B6SgV0fvF7Pp\n7vt9\r\n=MF8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRGIzbNrz4+/PqdTbFh472UtkDCF4vnu0J7MJ7cxwtFwIhAOG8FYhiWR4YtUlBdSpuKuBppDNCeIBcOn6D5olHQdbc"}]},"_npmUser":{"name":"abucarub","email":"acoutinhoabucarub@gmail.com"},"directories":{},"maintainers":[{"name":"abucarub","email":"acoutinhoabucarub@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-circle-countdown_1.0.0_1608059373664_0.1996602776722045"},"_hasShrinkwrap":false},"1.0.1":{"name":"@abucarub/react-circle-countdown","version":"1.0.1","description":"Hellow guys \\o_","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"keywords":[],"author":"","license":"ISC","dependencies":{},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"@types/react":"^17.0.0","@types/react-dom":"^17.0.0","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.1","react-dom":"^17.0.1","rollup":"^2.35.1","rollup-plugin-sass":"^1.2.2","rollup-plugin-typescript2":"^0.29.0","typescript":"^4.1.3"},"gitHead":"d252ecf96cce6ed5dfb221a47ae3585bb6b5d503","_id":"@abucarub/react-circle-countdown@1.0.1","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-iIgOmqz1KXn5+4q4qiFAe/vPSOddRWmI/p6ELlqLL20jeN7eCj83txrer3CJAOzoarLWQmsILhK8t4Y7N5x8HQ==","shasum":"287e3e1ea204f14c80a7ed52f49450ee51bfb068","tarball":"https://registry.npmjs.org/@abucarub/react-circle-countdown/-/react-circle-countdown-1.0.1.tgz","fileCount":5,"unpackedSize":16528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2X6YCRA9TVsSAnZWagAAh4AP/0FBUBVpKamypBaL87TE\nsJLe9VNTnsuLTAqJ++RBS0OL/KFkgwTLs91aiXJjW7lyWIOXDr+ybxORqcxh\nLEkr0QUyA2iUHNUbsMB58IpPeHatP15Mv6gQK/gFahsfvWXZ9n2lcwbjIajC\nRLmpaVb69zKD13GOiYo7A3DJ/uc8uZVO2CVUK1DCXqrYzsu1CYN7/YylTkcN\n5VNWP64DQFkKSrmEHQr9lgpQ0cN/2DsySahL61KJRBFHmSMFkOpQiVCDyigR\n1SZzxG7minqrli6yvz8qrqQXhialV3/R6/pgtDepgyfgLRjcjAW8JqoQb8OZ\nRhJCzVCM7Iu2arRTQaEKors9KcsQqJzrEX8RqlsEu156VNRceox2jsDn5+iV\n3gRgDyfhEI+OEaUYDB+fHg9Po4HdeGORSD/lK1iyivvCntkTUU16JKZXLWrU\n5d6YB2Kt6U/mbJMZc5/8F4BdN0WJm9T8TrA6EOI6FdFGDxZ4lTXTGdDMYJX1\ny4yO+itgjfHuSYEVmdd+kTSG9fSUOgodj8FJNgT5OBiLAC6Paduh82w829AA\nEgHSjkIqMYcdv6keC/uZ9KX0TCXSQz1iVaCQilV92KhYWoNnjwH0bVs9Scyy\nn9KW5ahn2r0Kviq/D9i9wF4V2bgIEt7bmnizxwTB+G8pjHdLPrpnTLbfU772\nS1Rf\r\n=NdsZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQVSmEoFXTTr410jPV3KLcwvd1Vmn7r6qvGvpZIu4LPwIhAJtrKMX+xwcC3Pmlf2Dwb7/wxY9/NPzcKv3PMIXbnTFf"}]},"_npmUser":{"name":"abucarub","email":"acoutinhoabucarub@gmail.com"},"directories":{},"maintainers":[{"name":"abucarub","email":"acoutinhoabucarub@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-circle-countdown_1.0.1_1608089240366_0.6626842904309769"},"_hasShrinkwrap":false},"1.0.2":{"name":"@abucarub/react-circle-countdown","version":"1.0.2","description":"React Circle Countdown is a customizable animated countdown component.","main":"dist/index.js","scripts":{"build":"rollup -c","start":"rollup -c -w"},"keywords":[],"author":"","license":"ISC","dependencies":{},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"@types/react":"^17.0.0","@types/react-dom":"^17.0.0","babel-core":"^6.26.3","babel-runtime":"^6.26.0","react":"^17.0.1","react-dom":"^17.0.1","rollup":"^2.35.1","rollup-plugin-sass":"^1.2.2","rollup-plugin-typescript2":"^0.29.0","typescript":"^4.1.3"},"gitHead":"037f799a58c318ffacf4e8fd71d807aaadebfbb5","_id":"@abucarub/react-circle-countdown@1.0.2","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-FdAXlD8CsInz5nocrGvY73x87wfgkG5Oj7By05aNknc+M82kpKqCd4uXo7zeljgTO0q45zSzBcLAVQdRAbu0jQ==","shasum":"9c1da6e6ffdcb581e37b050a87c9b38f330be1d4","tarball":"https://registry.npmjs.org/@abucarub/react-circle-countdown/-/react-circle-countdown-1.0.2.tgz","fileCount":6,"unpackedSize":22731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lumCRA9TVsSAnZWagAAtT0P/R56MZQ8eztk56VZX7/b\n3jV2mBkbPbQTk1X7BgD/QE+uR6fMenxf9hirBt2Ybbkom7c8+gfZh508naWU\n3zH2KFEz1ia2jlwu8weePxia/eaTtF56oaciS9wSN1dnPeV43Ud4BBtoka2K\nmSYzf+V4BfqKV12MczjwKcpTpJTNpvS0fHhSVEdfTnuMoMqTtDap8SUgfc8a\nErQypeJlNRi7hL19ef1z6GInUzvhSwTPZw2C3pDJJSHzXQNqnsrjYiMA76zu\nVEV04rG7boEBeyjQo1DV2zWEocMjQfcD/sJyziHqZJNdUnGyIbb3BlXPmXLu\nj1s/+c9GRaeEQ8qHOa0roMbeiZ+LE5XdSIO6MvcvITfFFz8xCnGaOKXsX76j\nrY1bEa7NhLtoWSIVBQvPbUpqBciNmkSQeC84gRB0k7rVGAHzmiE9+guVwq1B\n6buQxnv/qAjtIHff4+XQBYwmv6UCj27/n9L1EnO11WQ7UkE8tPgeHEnvNHBR\noapQ/NzJeKjxQHszZ3ur0vZ2GO7k0rNm8MqPE6saGyjO4+bxmNEdja/AGv35\nedl6xL6/dcHccMDfgVJy2pe+Jzs/FOKcNarrVaRGaTqVg5WfUzw3KFAKgK3K\nALVkIKM7GJm3WTF+rICcABLjSOi+SslvcWkfJxUek8xxAHDKiHcXhvyFFYqZ\nrzxX\r\n=KeYP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoOwYYWn4dMlTMEppYe6IhkwR/2u4FdvUo+YxLi6fTEAIgex5Ih9+figSvo0GnXUVVTAptc1NZQUTW/3Q5SPgMndw="}]},"_npmUser":{"name":"abucarub","email":"acoutinhoabucarub@gmail.com"},"directories":{},"maintainers":[{"name":"abucarub","email":"acoutinhoabucarub@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-circle-countdown_1.0.2_1608145829712_0.36529220148916575"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-15T19:09:33.627Z","1.0.0":"2020-12-15T19:09:33.867Z","modified":"2022-04-04T11:03:58.497Z","1.0.1":"2020-12-16T03:27:20.472Z","1.0.2":"2020-12-16T19:10:29.846Z"},"maintainers":[{"name":"abucarub","email":"acoutinhoabucarub@gmail.com"}],"description":"React Circle Countdown is a customizable animated countdown component.","keywords":[],"license":"ISC","readme":"# React Circle Countdown\nReact Circle Countdown is a customizable animated countdown component.\n\n## Installation\n\n```\nnpm i @abucarub/react-circle-countdown\n```\n\n## Usage\n\n```jsx\nimport CircleCountdown from '@abucarub/react-circle-countdown';\n\nconst YourComponent = () => (\n      <CircleCountdown\n        seconds={10}\n        size={150}\n        font=\"bold 20px Arial\"\n        fontColor=\"#D7ECE6\"\n        barColor=\"rgb(51, 255, 153, 0.5)\"\n        barWidth={15}\n        barTrailColor=\"#64867B\"\n        barEndShape=\"round\"\n        isPaused={false}\n        pausedText=\"Wait\"\n        endText=\"Finished\"\n        onComplete={() => {\n          console.log('Do something');\n        }}\n      />\n)\n```\n\n## Props\n| Name         | Type       | Default    | Description               |\n| ------------ | ---------- | ---------- | ------------------------- |\n| seconds | Number | required | The seconds to count down ( min value: 1) |\n| size | number | 130 | The width and height of the component |\n| font | string | \"20px sans-serif\" | Just like the CSS 'font' property |\n| fontColor | string | ![#fff](https://i.postimg.cc/6QRMDrW6/white-square.png) `'#fff'` | Takes any valid color format (HEX, rgb, rgba) |\n| barColor | string | ![#8ac4e1](https://i.postimg.cc/wj1fkKnm/blue-square.png) `'#8ac4e1'` | Takes any valid color format (HEX, rgb, rgba) |\n| barTrailColor | string | ![#6e818b](https://i.postimg.cc/g21MSSPB/gray-square.png) `'#6e818b'` | Takes any valid color format (HEX, rgb, rgba) |\n| barWidth | number | 15 | Path bar width |\n| barEndShape | round \\| butt | butt | The shape of bar end |\n| isPaused | boolean | true | Pause and play animation |\n| pausedText | string | Current time | The displayed text when the animation is paused |\n| endText | string | \"Time over\" | The displayed when the countdown is over |\n| showMask | boolean | true | If set false, it show just a countdown without any mask |\n| onComplete | function |  | Called when the countdown is over |\n\n## Recipes\n#### To restart de countdown\nCould be restarted at any time, by using a useRef hook. \n\n```jsx\nimport React, { useRef } from 'react';\nimport CountDown, { IInputHandles } from \"../components/CountDown\";\n\nconst YourComponent = () => {\n  const restartRef = useRef<IInputHandles>(null);\n\n  const handleRestart = () => {\n    restartRef.current?.restart();\n  };\n\n  return (\n    <>\n      <button onClick={() => handleRestart()}>\n        Restart\n      </button>\n      <CircleCountDown\n        ref={restartRef}\n        seconds={80}      \n      />\n    </>\n  )\n}\n...\n```\n","readmeFilename":"README.md"}