{"_id":"@bentoproject/date-countdown","_rev":"244-9b04d28c93002c53f6edfd79996bc0d4","name":"@bentoproject/date-countdown","dist-tags":{"nightly":"1.2305241828.0","latest":"1.2305051745.1"},"versions":{"1.2110261518.0":{"name":"@bentoproject/date-countdown","version":"1.2110261518.0","description":"AMP HTML amp-date-countdown Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-date-countdown/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-date-countdown/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/date-countdown@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-KQ/OTtyPxF12+o5zG955LhwyioJXMBGZMOrzfLOhx+dON55xNk+37HynJrgd+jCbG6LpOOJh6w0PXKo/U4j5wQ==","shasum":"4a2ee7c8dc33811e24c8e2491961af1c28c4746c","tarball":"https://registry.npmjs.org/@bentoproject/date-countdown/-/date-countdown-1.2110261518.0.tgz","fileCount":27,"unpackedSize":1876409,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC30wDseiedeTgNI2gbXloeakNLQmtPjZOyiA2TppULagIgYymqPhIXkd4xyJ1no16e4nvspV9u4Ru2BTFQYkfYR6Q="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/date-countdown_1.2110261518.0_1635445139782_0.3582973473383748"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/date-countdown","version":"1.2110252343.0","description":"Bento date-countdown Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-date-countdown/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-date-countdown/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Date Countdown\n\nThe Bento Date Countdown component displays a countdown sequence to a specified date. The Bento Date Countdown extension provides a list of time parameters. Refer to the [returned time parameters section](#returned-time-parameters) below for more information on the available time parameters.\n\n## Usage\n\n\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n#### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n#### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\nTo provide the datetime to countdown to, you must specify at least one of these required attributes: `end-date`,\n`timeleft-ms`, `timestamp-ms`, `timestamp-seconds`.\n\n#### `end-date`\n\nAn ISO formatted date to count down to. For example, `2020-06-01T00:00:00+08:00`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-ms`\n\nA POSIX epoch value in milliseconds; assumed to be UTC timezone. For example, `timestamp-ms=\"1521880470000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timestamp-seconds`\n\nA POSIX epoch value in seconds; assumed to be UTC timezone. For example, `timestamp-seconds=\"1521880470\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `timeleft-ms`\n\nA value in milliseconds left to be counting down. For example, 48 hours left `timeleft-ms=\"172800000\"`.\n\nUsed to determine the datetime to countdown to.\n\n#### `offset-seconds` (optional)\n\nA positive or negative number that represents the number of seconds to add or subtract from the `end-date`. For example, `offset-seconds=\"60\"` adds 60 seconds to the end-date.\n\n#### `when-ended` (optional)\n\nSpecifies whether to stop the timer when it reaches 0 seconds. The value can be set to `stop` (default) to indicate the timer to stop at 0 seconds and will not pass the final date or `continue` to indicate the timer should continue after reaching 0 seconds.\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value is `en` (for English).\n\nSupported values:\n\n| Code | Language |\n| ----- | ------------------- |\n| de | German |\n| en | English |\n| es | Spanish |\n| fr | French |\n| id | Indonesian |\n| it | Italian |\n| ja | Japanese |\n| ko | Korean |\n| nl | Dutch |\n| pt | Portuguese |\n| ru | Russian |\n| th | Thai |\n| tr | Turkish |\n| vi | Vietnamese |\n| zh-cn | Chinese Simplified |\n| zh-tw | Chinese Traditional |\n\n#### `biggest-unit` (optional)\n\nAllows the `bento-date-countdown` component to calculate the time difference based\non the specified `biggest-unit` value. For example, assume there are `50 days 10 hours` left, if the `biggest-unit` is set to `hours`, the result displays\n`1210 hours` left.\n\n- Supported values: `days`, `hours`, `minutes`, `seconds`\n- Default: `days`\n\n#### `count-up` (optional)\n\nInclude this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `bento-date-countdown` will display a decrementing (toward 0) negative value.\n\n### Styling\n\nYou may use the `bento-date-countdown` element selector to style the Bento Date Countdown component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-countdown\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateCountdown} from '@bentoproject/date-countdown/react';\nimport '@bentoproject/date-countdown/styles.css';\n\nfunction App() {\n return (\n (\n
\n {`${data.days} ${data.dd} ${data.d}`}\n
\n {`${data.hours} ${data.hh} ${data.h}`}\n
\n {`${data.minutes} ${data.mm} ${data.m}`}\n
\n {`${data.seconds} ${data.ss} ${data.s}`}\n
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Countdown component does not have an imperative API. However, the Bento Date Countdown Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Countdown Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Countdown Preact/React component allows consumers to render their own templates. These templates may use inline styles, `