{"_id":"@abubseifu/react-flip-clock-countdown-forked","_rev":"1-f4305ea87a6ea36d8dfc5e2722fde004","name":"@abubseifu/react-flip-clock-countdown-forked","dist-tags":{"latest":"1.3.2"},"versions":{"1.3.1":{"name":"@abubseifu/react-flip-clock-countdown-forked","version":"1.3.1","description":"A 3D animated countdown component for React.","author":{"name":"leenguyen"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/sLeeNguyen/react-flip-clock-countdown.git"},"bugs":{"url":"https://github.com/sLeeNguyen/react-flip-clock-countdown/issues"},"homepage":"https://github.com/sLeeNguyen/react-flip-clock-countdown#readme","main":"dist/index.js","module":"dist/index.modern.js","types":"dist/index.d.ts","source":"src/index.ts","engines":{"node":">=12"},"keywords":["react","typescript","countdown","flip-clock","react-component"],"scripts":{"build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","prepare":"run-s build && husky install","test":"run-s test:unit test:lint test:build","test:build":"run-s build","test:lint":"eslint src/*.{ts,tsx}","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd examples/react-app && npm install && npm run build","deploy":"gh-pages -d examples/build","lint:staged":"lint-staged"},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{js,jsx,ts,tsx}":"eslint --fix","*.{ts,js,jsx,tsx,json,yml,md}":["prettier --write"]},"dependencies":{"clsx":"^1.1.1"},"peerDependencies":{"react":">= 16.13.0"},"devDependencies":{"@commitlint/cli":"^16.0.0","@commitlint/config-conventional":"^16.0.0","@testing-library/jest-dom":">=4.2.4","@testing-library/react":">=9.5.0","@testing-library/user-event":">=7.2.1","@types/jest":">=25.1.4","@types/node":"^12.12.38","@types/react":">=16.9.27","@types/react-dom":">=16.9.7","@typescript-eslint/eslint-plugin":"^4.9.1","@typescript-eslint/parser":"^4.9.1","babel-eslint":"^10.0.3","commitizen":"^4.2.4","cross-env":"^7.0.2","cz-conventional-changelog":"^3.3.0","eslint":"^6.8.0 || ^7.5.0","eslint-config-prettier":"^6.7.0","eslint-config-standard":"^14.1.0","eslint-plugin-node":"^11.0.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-promise":"^6.0.0","eslint-plugin-standard":"^5.0.0","gh-pages":"^2.2.0","husky":"^7.0.4","lint-staged":"^12.1.4","microbundle-crl":"^0.13.10","npm-run-all":"^4.1.5","prettier":"^2.0.4","react":">= 16.13.0","react-dom":">= 16.13.0","react-scripts":"^3.4.1 || >= 4.0.3","typescript":"^3.7.5"},"gitHead":"7c9d053474e3ffbda7d2c7d2e9a83c44f48afcf4","_id":"@abubseifu/react-flip-clock-countdown-forked@1.3.1","_nodeVersion":"16.16.0","_npmVersion":"8.14.0","dist":{"integrity":"sha512-owpeWnRbnUkAoyOJOTLEDFM4x/B2c+kp2sNJ569luHB9JANWYvjLxCmr0kQBdJOf6NiChL69EGu6s1C/j5SymA==","shasum":"43bb3be64cae8fd3e3839c07e4a82de3a6a4be45","tarball":"https://registry.npmjs.org/@abubseifu/react-flip-clock-countdown-forked/-/react-flip-clock-countdown-forked-1.3.1.tgz","fileCount":14,"unpackedSize":80436,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYsOXxOwXzgrAdIdBf5CTWu+21NAf1waFL7kmc7BN1bwIgI4BChcmG9AshnaNRCn7olmZsy7+JuVQ1IQynhgLtO5Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOEbYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9FQ//WT6w+fBB4Sx8PUSICXNlGvLDTGuE6Rt8FtMiUtT/ZRn0AGln\r\nzHF/2os1++xHzMzcChN4tembBm+VLWMhUydQizunw0EUU4g+itrLmMmN+eEZ\r\nC+sAdPLbIMuYO+kK4qMcu8eNzqHHUKi/NsSLFFf/SSMQXByEhQsPlD0MzKKd\r\n2EKjWo49BTl+V++EjqdCvwI+WZ4QiMOtA7oColyG34rwlqLTzIjQD6g5lm03\r\nrS0LLqg+TQVHybZXbUnxY/Kn7DHOSJE79QGSc2ecwVrzivMA40tljviDr5BD\r\nIthsNPe3fMx67bB0Eo1A+q52BefRSxlOy6DQA62no3f0owH03XaH3S52hSFk\r\nNTjaihTzhZaTgPxc7AI3/L6qUs3uLrLbX84fq45KVbzYRnjg937+QsIKKxFU\r\n6e5AwXU+0nBb6v44Scvb4tDwKXydRPix06rOxevpFRuM58TF8Kq19xSYQKKy\r\n/CNmdlLfhftEdhXdS2LMIDxlOWiugsiY9vXBfZz2iTOFh5j+lZtoW+sHcoqn\r\nUF6bC8HJ9L2hv0+HdSaJ0lWWApWA72LTe0brYI57/bZmnV5PFLZDbYMT8239\r\n5ECnk09sOs1wDZ+X3yWXVhTl1F48COJjr0Ir6+NuEYVSSS6Gnjyn88oupiAp\r\nq0EUe6X9hI0MbHrnO5j5FQnoQeFlGISh0Hs=\r\n=bB7R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abubseifu","email":"abubeker3522@gmail.com"},"directories":{},"maintainers":[{"name":"abubseifu","email":"abubeker3522@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-flip-clock-countdown-forked_1.3.1_1664632536141_0.3149893092283902"},"_hasShrinkwrap":false},"1.3.2":{"name":"@abubseifu/react-flip-clock-countdown-forked","version":"1.3.2","description":"A 3D animated countdown component for React.","author":{"name":"abubseifu"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/sabubseifu/react-flip-clock-countdown.git"},"bugs":{"url":"https://github.com/sabubseifu/react-flip-clock-countdown/issues"},"homepage":"https://github.com/sabubseifu/react-flip-clock-countdown#readme","main":"dist/index.js","module":"dist/index.modern.js","types":"dist/index.d.ts","source":"src/index.ts","engines":{"node":">=12"},"keywords":["react","typescript","countdown","flip-clock","react-component"],"scripts":{"build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","prepare":"run-s build && husky install","test":"run-s test:unit test:lint test:build","test:build":"run-s build","test:lint":"eslint src/*.{ts,tsx}","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd examples/react-app && npm install && npm run build","deploy":"gh-pages -d examples/build","lint:staged":"lint-staged"},"commitlint":{"extends":["@commitlint/config-conventional"]},"lint-staged":{"*.{js,jsx,ts,tsx}":"eslint --fix","*.{ts,js,jsx,tsx,json,yml,md}":["prettier --write"]},"dependencies":{"clsx":"^1.1.1"},"peerDependencies":{"react":">= 16.13.0"},"devDependencies":{"@commitlint/cli":"^16.0.0","@commitlint/config-conventional":"^16.0.0","@testing-library/jest-dom":">=4.2.4","@testing-library/react":">=9.5.0","@testing-library/user-event":">=7.2.1","@types/jest":">=25.1.4","@types/node":"^12.12.38","@types/react":">=16.9.27","@types/react-dom":">=16.9.7","@typescript-eslint/eslint-plugin":"^4.9.1","@typescript-eslint/parser":"^4.9.1","babel-eslint":"^10.0.3","commitizen":"^4.2.4","cross-env":"^7.0.2","cz-conventional-changelog":"^3.3.0","eslint":"^6.8.0 || ^7.5.0","eslint-config-prettier":"^6.7.0","eslint-config-standard":"^14.1.0","eslint-plugin-node":"^11.0.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-promise":"^6.0.0","eslint-plugin-standard":"^5.0.0","gh-pages":"^2.2.0","husky":"^7.0.4","lint-staged":"^12.1.4","microbundle-crl":"^0.13.10","npm-run-all":"^4.1.5","prettier":"^2.0.4","react":">= 16.13.0","react-dom":">= 16.13.0","react-scripts":"^3.4.1 || >= 4.0.3","typescript":"^3.7.5"},"gitHead":"a41e95fc59f33ec43664bcc9d629cfbd3c327fb8","_id":"@abubseifu/react-flip-clock-countdown-forked@1.3.2","_nodeVersion":"16.16.0","_npmVersion":"8.14.0","dist":{"integrity":"sha512-33/OhBkq+k0T2H0Zr5YDViu+XklhySSIJkCbnk/DH5oWkEmDCk4LVCPNCb77abUD6HM69VukVKWc/9B5rrP0UQ==","shasum":"716e685155d6eddc1e779d8f1772e6d4df3799cf","tarball":"https://registry.npmjs.org/@abubseifu/react-flip-clock-countdown-forked/-/react-flip-clock-countdown-forked-1.3.2.tgz","fileCount":14,"unpackedSize":80195,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr+B4b/mOzc0CLyNT2/H2POIj8gMbhgvuXLGvyp5shDwIgM8nmHd7s93ZcsVMRc8CdgEnYlbYCuyNdNbckteQEOro="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOE7uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3eA//c/hsgNgtba5cGxWO7FyVV6uXhAltGgaKh0UeMrW5gbN9uyEI\r\nxYfdDvgOvPAhwvigawPfcDW7sNW6uNqHkAJ4L0ff8kl7ifF2S0i3HcmNBuuc\r\nmEgTG91tyeRsco/w+6U08ctkf/X8M2P/JhaCUqqikGXzti1xk7fa2s+Bcs7C\r\nOmql1TwH50mlxGZplJXuzg5P08ZdA0gHEah9TM31CVxoKwGuoUDU/WXnocKL\r\nPVk2YR0aJKEq5yGsunzly36caNvQF7+WdJBYA3jlBzKh/JLWzSrl76YSK23+\r\npL6WIkyz10By0itpbGls+w9RihuUVDG8cYyhnY2a00Q92gTOKr6/aS/rsBrq\r\nJLjkPt+z59Jf1Luo8axfqI08B8RLdE1nTDeLT+OoxEntMmUjhfsqZ7qduvpw\r\nwG3Fa+hymkBVm4tLde2juWnikYOW14/SMwsynpI9CXxHPe1LQkmF4+3zK4+8\r\nDLADWW7ObUmGLz36J8jbxwtrC733q1c4T7KUl0/OzzmyisjkI3EuaHF/L3km\r\n/pn3nmWrB+7UJlh2iHrFzS70zogRkX+F/UxmEamwJzHNB7VLya8FBpzUqu6m\r\nkPXkF2BVQHNLp9HjxiFwKYt8uJBl55uB6s8wWLPN8l32JrAe37hZW970mZss\r\nKd2LRelPcLU0r3lot73lD+aWJoCvzVkLs50=\r\n=0Gzs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abubseifu","email":"abubeker3522@gmail.com"},"directories":{},"maintainers":[{"name":"abubseifu","email":"abubeker3522@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-flip-clock-countdown-forked_1.3.2_1664634605907_0.5659287729497349"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-01T13:55:36.093Z","1.3.1":"2022-10-01T13:55:36.333Z","modified":"2022-10-01T14:30:06.145Z","1.3.2":"2022-10-01T14:30:06.067Z"},"maintainers":[{"name":"abubseifu","email":"abubeker3522@gmail.com"}],"description":"A 3D animated countdown component for React.","homepage":"https://github.com/sabubseifu/react-flip-clock-countdown#readme","keywords":["react","typescript","countdown","flip-clock","react-component"],"repository":{"type":"git","url":"git+https://github.com/sabubseifu/react-flip-clock-countdown.git"},"author":{"name":"abubseifu"},"bugs":{"url":"https://github.com/sabubseifu/react-flip-clock-countdown/issues"},"license":"MIT","readme":"# react-flip-clock-countdown\n\n> A 3D animated countdown component for React.\n\n[![NPM](https://img.shields.io/npm/v/@abubseifu/react-flip-clock-countdown.svg)](https://www.npmjs.com/package/@abubseifu/react-flip-clock-countdown) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n<div align=\"center\">\n  <img src=\"./resources/demo.gif\" alt=\"react flip clock countdown demo\" width=\"500\" />\n</div>\n\n## Install\n\n```bash\nnpm install --save @abubseifu/react-flip-clock-countdown\n```\n\nOr\n\n```bash\nyarn add @abubseifu/react-flip-clock-countdown\n```\n\n## Usage\n\n### Basic usage\n\n```tsx\nimport React, { Component } from 'react';\n\nimport FlipClockCountdown from '@abubseifu/react-flip-clock-countdown';\nimport '@abubseifu/react-flip-clock-countdown/dist/index.css';\n\nclass Example extends Component {\n  render() {\n    return <FlipClockCountdown to={new Date().getTime() + 24 * 3600 * 1000 + 5000} />;\n  }\n}\n```\n\n### Render a React Component when countdown is complete\n\nIn case you want to change the output of the component, or want to signal that the countdown's work is done, you can do this by either using the onComplete callback or by specifying a React child within `<FlipClockCountdown></FlipClockCountdown>`, which will only be shown once the countdown is complete.\n\n```tsx\nimport React, { Component } from 'react';\n\nimport FlipClockCountdown from '@abubseifu/react-flip-clock-countdown';\nimport '@abubseifu/react-flip-clock-countdown/dist/index.css';\n\nclass Completed extends Component {\n  render() {\n    return <span>The countdown is complete</span>\n  }\n}\n\nclass RenderByUsingReactChild extends Component {\n  render() {\n    return (\n      <FlipClockCountdown to={new Date().getTime() + 24 * 3600 * 1000 + 5000}>\n        <Completed />\n      </FlipClockCountdown>;\n    )\n  }\n}\n\nclass RenderByUsingCallback extends Component {\n  constructor(props) {\n    super(props);\n\n    this.endTime = new Date().getTime() + 24 * 3600 * 1000 + 5000;\n    this.state = {\n      isCompleted: false\n    }\n\n    this.handleComplete = this.handleComplete.bind(this);\n  }\n\n  handleComplete() {\n    this.setState({ isCompleted: true });\n  }\n\n  render() {\n    return (\n      <React.Fragment>\n        {isCompleted && <Completed />}\n        <FlipClockCountdown onComplete={this.handleComplete} to={this.endTime} />\n      </React.Fragment>\n    )\n  }\n}\n```\n\n### Render a custom countdown\n\n#### Example 1\n\n```tsx\nimport React, { Component } from 'react';\n\nimport FlipClockCountdown from '@abubseifu/react-flip-clock-countdown';\nimport '@abubseifu/react-flip-clock-countdown/dist/index.css';\nimport 'styles.css';\n\nclass Example extends Component {\n  render() {\n    return (\n      <FlipClockCountdown\n        to={new Date().getTime() + 24 * 3600 * 1000 + 5000}\n        labels={['DAYS', 'HOURS', 'MINUTES', 'SECONDS']}\n        labelStyle={{ fontSize: 10, fontWeight: 500, textTransform: 'uppercase' }}\n        digitBlockStyle={{ width: 40, height: 60, fontSize: 30 }}\n        dividerStyle={{ color: 'white', height: 1 }}\n        separatorStyle={{ color: 'red', size: '6px' }}\n        duration={0.5}\n      >\n        Finished\n      </FlipClockCountdown>\n    );\n  }\n}\n```\n\n#### Example 2\n\n```tsx\nimport React, { Component } from 'react';\n\nimport FlipClockCountdown from '@abubseifu/react-flip-clock-countdown';\nimport '@abubseifu/react-flip-clock-countdown/dist/index.css';\nimport 'styles.css';\n\nclass Example extends Component {\n  render() {\n    return (\n      <FlipClockCountdown\n        to={new Date().getTime() + 24 * 3600 * 1000 + 5000}\n        className='flip-clock'\n        labels={['DAYS', 'HOURS', 'MINUTES', 'SECONDS']}\n        duration={0.5}\n      />\n    );\n  }\n}\n```\n\n```css\n/* styles.css */\n\n.flip-clock {\n  --fcc-flip-duration: 0.5s; /* transition duration when flip card */\n  --fcc-digit-block-width: 40px; /* width of digit card */\n  --fcc-digit-block-height: 60px; /* height of digit card, highly recommend in even number */\n  --fcc-digit-font-size: 30px; /* font size of digit */\n  --fcc-digit-color: white; /* color of digit */\n  --fcc-label-font-size: 10px; /* font size of label */\n  --fcc-label-color: #ffffff; /* color of label */\n  --fcc-background: black; /* background of digit card */\n  --fcc-divider-color: white; /* color of divider */\n  --fcc-divider-height: 1px; /* height of divider */\n  --fcc-separator-size: 6px; /* size of colon */\n  --fcc-separator-color: red; /* color of colon */\n}\n```\n\n## Props\n\nThe <code>FlipClockCountdown</code> has all properties of `div` and additional props below\n\n| Name                                      |                   Type                    | Required |                       Default                        | Description                                                                                                                                  |\n| :---------------------------------------- | :---------------------------------------: | :------: | :--------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------- |\n| [**to**](#to)                             | <code>Date&#124;string&#124;number</code> |   yes    |                                                      | <code>Date</code> or timestamp in the future                                                                                                 |\n| [~~**containerProps**~~](#containerprops) |            <code>object</code>            |    no    |                <code>undefined</code>                | Props apply to the flip clock container. This prop is deprecated, you should apply directly to the <code>FlipClockCountdown</code> component |\n| [**onComplete**](#oncomplete)             |             <code>func</code>             |    no    |                                                      | Callback when countdown ends<br/> **Signature**:<br/>`function() => void`                                                                    |\n| [**onTick**](#ontick)                     |             <code>func</code>             |    no    |                                                      | Callback on every interval tick<br /> **Signature**:<br/>`function({ timeDelta, completed }) => void`                                        |\n| **labels**                                |       <code>`Array<string>`</code>        |    no    | <code>['Days', 'Hours', 'Minutes', 'Seconds']</code> | Custom array of labels used to display below each section (day, hour, minute, second)                                                        |\n| **showLabels**                            |           <code>boolean</code>            |    no    |                  <code>true</code>                   | Set it to `false` if you don't want to show the labels                                                                                       |\n| **showSeparators**                        |           <code>boolean</code>            |    no    |                  <code>true</code>                   | Set it to `false` if you don't want to show the separators (colon) between time unit.                                                        |\n| **labelStyle**                            |     <code>React.CSSProperties</code>      |    no    |                <code>undefined</code>                | The styles apply to labels `font-size`, `color`, `width`, `height`, etc                                                                      |\n| **digitBlockStyle**                       |     <code>React.CSSProperties</code>      |    no    |                <code>undefined</code>                | The styles apply to digit blocks like `font-size`, `color`, `width`, `height`, etc                                                           |\n| **separatorStyle**                        |            <code>object</code>            |    no    |                <code>undefined</code>                | The styles apply to separator (colon), includes `size` and `color`                                                                           |\n| **dividerStyle**                          |            <code>object</code>            |    no    |                <code>undefined</code>                | The style will be applied to divider, includes `color` and `height`                                                                          |\n| **duration**                              |            <code>number</code>            |    no    |                   <code>0.7</code>                   | Duration (in second) when flip card. Valid value in range (0, 1)                                                                             |\n\n### `to`\n\nThe `to` prop can be a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object, `string`, or timestamp in the future. This date is compared with the current date.\n\nValid values can be _(and more)_:\n\n- `'2022-02-08T14:27:32.635Z'` // [`Date` time string format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format)\n- `1644330452635` // Timestamp in milliseconds\n- `new Date(1644330452635)` // [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object\n\n### `className`\n\nClass names applied to flip clock container element. Use it to custom flip-clock's styles. See [example](#render-a-countdown-with-custom-styles)\n\n### `containerProps`\n\nAll props of `div`\n\n### `children`\n\nThis component also considers the child that may live within the `<FlipClockCountdown></FlipClockCountdown>` element, which, in case it's available, replaces the countdown's component state once it's complete. See [example](#render-a-react-component-when-countdown-is-complete).\n\n### `onComplete`\n\nCallback when countdown ends.\n\n`function() => void`\n\nSee [example](#render-a-react-component-when-countdown-is-complete).\n\n### `onTick`\n\nCallback on every interval tick.\n\n`function({ timeDelta, completed }) => void`\n\n- `timeDelta: { total: number, days: number, hours: number, minutes: number, seconds: number}` - the remaining time in formatted.\n- `completed: boolean` - countdown's state.\n\n## Contributing\n\nThe package is made up of 2 main folders:\n\n- <code>/src</code> contains the FlipClockCountdown\n- <code>/examples</code> contains the create-react-app and create-next-app based demo website\n\nTo setup and run a local copy:\n\n1. Clone this repo with `https://github.com/sabubseifu/react-flip-clock-countdown`\n2. Run `npm install` in the **root** folder\n3. Run `npm install` in the **examples/react-app** folder\n4. In separate terminal windows, run `npm start` in the **root** and **examples/react-app** folders.\n\nWhen you're done working on your changes, feel free to send PRs with the details and include a screenshot if you've changed anything visually.\n\n## License\n\nMIT © [abubseifu](https://github.com/sabubseifu)\n","readmeFilename":"README.md"}