{"id":26898492,"url":"https://github.com/sleenguyen/react-flip-clock-countdown","last_synced_at":"2025-04-09T05:08:29.573Z","repository":{"id":41113426,"uuid":"453424296","full_name":"sLeeNguyen/react-flip-clock-countdown","owner":"sLeeNguyen","description":"A 3D animated countdown component for React","archived":false,"fork":false,"pushed_at":"2025-01-20T03:43:58.000Z","size":3222,"stargazers_count":69,"open_issues_count":3,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T05:08:22.598Z","etag":null,"topics":["countdown","flip-clock","react","react-component","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sLeeNguyen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-29T14:40:55.000Z","updated_at":"2025-02-26T08:07:04.000Z","dependencies_parsed_at":"2024-05-01T04:24:11.411Z","dependency_job_id":"f91c9da8-34d8-4b2f-9b80-dac84a606c4a","html_url":"https://github.com/sLeeNguyen/react-flip-clock-countdown","commit_stats":{"total_commits":52,"total_committers":3,"mean_commits":"17.333333333333332","dds":0.07692307692307687,"last_synced_commit":"7c281901cf447d72f67df2d871e95067c8fbb5d2"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sLeeNguyen%2Freact-flip-clock-countdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sLeeNguyen%2Freact-flip-clock-countdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sLeeNguyen%2Freact-flip-clock-countdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sLeeNguyen%2Freact-flip-clock-countdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sLeeNguyen","download_url":"https://codeload.github.com/sLeeNguyen/react-flip-clock-countdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["countdown","flip-clock","react","react-component","typescript"],"created_at":"2025-04-01T05:47:52.778Z","updated_at":"2025-04-09T05:08:29.546Z","avatar_url":"https://github.com/sLeeNguyen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-flip-clock-countdown\n\n\u003e A 3D animated countdown component for React.\n\n[![NPM](https://img.shields.io/npm/v/@leenguyen/react-flip-clock-countdown.svg)](https://www.npmjs.com/package/@leenguyen/react-flip-clock-countdown) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./resources/demo.gif\" alt=\"react flip clock countdown demo\" width=\"500\" /\u003e\n\u003c/div\u003e\n\n## Install\n\n```bash\nnpm install --save @leenguyen/react-flip-clock-countdown\n```\n\nOr\n\n```bash\nyarn add @leenguyen/react-flip-clock-countdown\n```\n\n## Props\n\nThe \u003ccode\u003eFlipClockCountdown\u003c/code\u003e has all properties of `div` and additional props below\n\n| Name                       |                   Type                    | Required |                       Default                        | Description                                                                                                                                                                      |\n| :------------------------- | :---------------------------------------: | :------: | :--------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **to**                     | \u003ccode\u003eDate\u0026#124;string\u0026#124;number\u003c/code\u003e |   yes    |                                                      | \u003ccode\u003eDate\u003c/code\u003e or timestamp in the future.                                                                                                                                    |\n| ~~**containerProps**~~     |            \u003ccode\u003eobject\u003c/code\u003e            |    no    |                \u003ccode\u003eundefined\u003c/code\u003e                | Props apply to the flip clock container. This prop is deprecated, you should apply directly to the \u003ccode\u003eFlipClockCountdown\u003c/code\u003e component.                                    |\n| **onComplete**             |             \u003ccode\u003efunc\u003c/code\u003e             |    no    |                                                      | Callback when countdown ends\u003cbr/\u003e **Signature**:\u003cbr/\u003e`function() =\u003e void`                                                                                                        |\n| **onTick**                 |             \u003ccode\u003efunc\u003c/code\u003e             |    no    |                                                      | Callback on every interval tick\u003cbr /\u003e **Signature**:\u003cbr/\u003e`function({ timeDelta, completed }) =\u003e void`                                                                            |\n| **renderMap**              |       \u003ccode\u003e`Array\u003cboolean\u003e`\u003c/code\u003e       |    no    |        \u003ccode\u003e[true, true, true, true]\u003c/code\u003e         | Each element represents the render state of each section (day, hour, minute, second). If `true` section will be rendered, `false` otherwise.                                     |\n| **labels**                 |       \u003ccode\u003e`Array\u003cstring\u003e`\u003c/code\u003e        |    no    | \u003ccode\u003e['Days', 'Hours', 'Minutes', 'Seconds']\u003c/code\u003e | Custom array of labels used to represent information for each section (day, hour, minute, second).                                                                               |\n| **showLabels**             |           \u003ccode\u003eboolean\u003c/code\u003e            |    no    |                  \u003ccode\u003etrue\u003c/code\u003e                   | Set it to `false` if you don't want to show the labels.                                                                                                                          |\n| **showSeparators**         |           \u003ccode\u003eboolean\u003c/code\u003e            |    no    |                  \u003ccode\u003etrue\u003c/code\u003e                   | Set it to `false` if you don't want to show the separators (colon) between time unit.                                                                                            |\n| **labelStyle**             |     \u003ccode\u003eReact.CSSProperties\u003c/code\u003e      |    no    |                \u003ccode\u003eundefined\u003c/code\u003e                | The styles apply to labels `font-size`, `color`, `width`, `height`, etc.                                                                                                         |\n| **digitBlockStyle**        |     \u003ccode\u003eReact.CSSProperties\u003c/code\u003e      |    no    |                \u003ccode\u003eundefined\u003c/code\u003e                | The styles apply to digit blocks like `font-size`, `color`, `width`, `height`, etc.                                                                                              |\n| **separatorStyle**         |            \u003ccode\u003eobject\u003c/code\u003e            |    no    |                \u003ccode\u003eundefined\u003c/code\u003e                | The styles apply to separator (colon), includes `size` and `color`.                                                                                                              |\n| **dividerStyle**           |            \u003ccode\u003eobject\u003c/code\u003e            |    no    |                \u003ccode\u003eundefined\u003c/code\u003e                | The style will be applied to divider, includes `color` and `height`.                                                                                                             |\n| **spacing**                |            \u003ccode\u003eobject\u003c/code\u003e            |    no    |                \u003ccode\u003eundefined\u003c/code\u003e                | This prop allows you to modify the clock spacing.                                                                                                                                |\n| **duration**               |            \u003ccode\u003enumber\u003c/code\u003e            |    no    |                   \u003ccode\u003e0.7\u003c/code\u003e                   | Duration (in second) when flip card. Valid value in range (0, 1).                                                                                                                |\n| **hideOnComplete**         |           \u003ccode\u003eboolean\u003c/code\u003e            |    no    |                  \u003ccode\u003etrue\u003c/code\u003e                   | By default, the countdown will be hidden when it completed (or show children if provided). This will keep the timer in place and stuck at zeros when the countdown is completed. |\n| **stopOnHiddenVisibility** |           \u003ccode\u003eboolean\u003c/code\u003e            |    no    |                  \u003ccode\u003efalse\u003c/code\u003e                  | Whether or not to stop the clock when the visibilityState is hidden, enabling this feature will prevent the component gets derailed if we switch between browser tabs.           |\n| **renderOnServer**         |           \u003ccode\u003eboolean\u003c/code\u003e            |    no    |                  \u003ccode\u003efalse\u003c/code\u003e                  | Whether or not to render the clock on server.                                                                                                                                    |\n\n## Usage\n\n### Basic usage\n\n```tsx\nimport React, { Component } from 'react';\n\nimport FlipClockCountdown from '@leenguyen/react-flip-clock-countdown';\nimport '@leenguyen/react-flip-clock-countdown/dist/index.css';\n\nclass Example extends Component {\n  render() {\n    return \u003cFlipClockCountdown to={new Date().getTime() + 24 * 3600 * 1000 + 5000} /\u003e;\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 `\u003cFlipClockCountdown\u003e\u003c/FlipClockCountdown\u003e`, which will only be shown once the countdown is complete.\n\n```tsx\nimport React, { Component } from 'react';\n\nimport FlipClockCountdown from '@leenguyen/react-flip-clock-countdown';\nimport '@leenguyen/react-flip-clock-countdown/dist/index.css';\n\nclass Completed extends Component {\n  render() {\n    return \u003cspan\u003eThe countdown is complete\u003c/span\u003e\n  }\n}\n\nclass RenderByUsingReactChild extends Component {\n  render() {\n    return (\n      \u003cFlipClockCountdown to={new Date().getTime() + 24 * 3600 * 1000 + 5000}\u003e\n        \u003cCompleted /\u003e\n      \u003c/FlipClockCountdown\u003e;\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      \u003cReact.Fragment\u003e\n        {isCompleted \u0026\u0026 \u003cCompleted /\u003e}\n        \u003cFlipClockCountdown onComplete={this.handleComplete} to={this.endTime} /\u003e\n      \u003c/React.Fragment\u003e\n    )\n  }\n}\n```\n\n### Render a custom countdown\n\n#### Custom styles\n\n```tsx\nclass Example extends Component {\n  render() {\n    return (\n      \u003cFlipClockCountdown\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      \u003e\n        Finished\n      \u003c/FlipClockCountdown\u003e\n    );\n  }\n}\n```\n\n#### Custom styles via css\n\n```tsx\nimport 'styles.css';\n\nclass Example extends Component {\n  render() {\n    return \u003cFlipClockCountdown to={new Date().getTime() + 24 * 3600 * 1000 + 5000} className='flip-clock' /\u003e;\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-spacing: 8px; /* space between unit times and separators */\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-block-radius: 5px; /* border radius of digit card */\n  --fcc-digit-block-spacing: 5px; /* space between blocks in each unit of time */\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#### Custom section to be rendered\n\nIn case you don't want to display the date, use `renderMap` to custom render state of each section\n\n```tsx\nclass Example extends Component {\n  render() {\n    return (\n      \u003cFlipClockCountdown to={new Date().getTime() + 24 * 3600 * 1000 + 5000} renderMap={[false, true, true, true]}\u003e\n        Finished\n      \u003c/FlipClockCountdown\u003e\n    );\n  }\n}\n```\n\n## Contributing\n\nThe package is made up of 2 main folders:\n\n- \u003ccode\u003e/src\u003c/code\u003e contains the FlipClockCountdown\n- \u003ccode\u003e/examples\u003c/code\u003e 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/sLeeNguyen/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 © [leenguyen](https://github.com/sLeenguyen)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleenguyen%2Freact-flip-clock-countdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsleenguyen%2Freact-flip-clock-countdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleenguyen%2Freact-flip-clock-countdown/lists"}