{"_id":"@codemix/react-intl-formatted-duration","_rev":"5-36b9c3c200cb054aec4b3f7ad5abad88","name":"@codemix/react-intl-formatted-duration","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0":{"name":"@codemix/react-intl-formatted-duration","version":"3.0.0","description":"React intl component to express time duration","keywords":["duration","react","intl","format"],"homepage":"https://github.com/en-japan-air/react-intl-formatted-duration","license":"MIT","main":"dist/bundle.js","module":"dist/module.js","repository":{"type":"git","url":"git+https://github.com/en-japan-air/react-intl-formatted-duration.git"},"scripts":{"build":"rollup -c rollup.config.js","codecov":"codecov","lint":"eslint index.js","test":"jest","test:coverage":"jest --coverage","test:watch":"jest --watchAll","prepare":"npm run build","posttest":"npm run lint"},"devDependencies":{"babel-eslint":"^8.2.3","babel-jest":"^23.0.1","babel-preset-env":"^1.7.0","babel-preset-flow":"^6.23.0","babel-preset-react":"^6.24.1","codecov":"^3.0.2","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","enzyme-react-intl":"^2.0.0","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-flowtype":"^2.49.3","eslint-plugin-react":"^7.9.1","flow-bin":"^0.73.0","jest":"^23.1.0","prettier":"^1.13.4","prop-types":"^15.6.1","react":"^16.4.0","react-dom":"^16.4.0","react-intl":"^2.4.0","react-test-renderer":"^16.4.0","rollup":"0.60.1","rollup-plugin-babel":"3.0.4"},"peerDependencies":{"prop-types":">= 15.0","react":">= 15.0","react-intl":">= 2.0"},"jest":{"setupTestFrameworkScriptFile":"<rootDir>/internals/testing/test-setup.js","testRegex":"__tests__/.*\\.test\\.js$","transform":{".*":"<rootDir>/node_modules/babel-jest"}},"gitHead":"d814a6dd56099cfffec5ed066678342b078b720a","bugs":{"url":"https://github.com/en-japan-air/react-intl-formatted-duration/issues"},"_id":"@codemix/react-intl-formatted-duration@3.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"charlespick","email":"charles@codemix.com"},"dist":{"integrity":"sha512-UtfpkXP37CxkCzXCDkUeBg/fRGSKMfRE0LJJTUYSSRCBD9NEherggKBUpE4jkuL3cOqr7NadcqwxFWv1j7ONUA==","shasum":"da24ff864bbdd2f909fb62def30671b768ac0ba3","tarball":"https://registry.npmjs.org/@codemix/react-intl-formatted-duration/-/react-intl-formatted-duration-3.0.0.tgz","fileCount":12,"unpackedSize":203257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbLBZpCRA9TVsSAnZWagAAonsP/02oc+Z0PYLKwIWkgM2N\n9+8R7qitJ7Xbvq6Ur82ZK+8rShn37utPVBxhFQFJwRsy0CPOQluVHMJRWH1V\n77sGouj9kKNz5VB+bS55g3unWCvXqVTfqlM4iZFQMBHL5g8h2tdU1fyHx0ku\nChfCNb+oOUkf7H4iWdZWLIEi3JbP71aIAxDAk/Wzzp/Mq1snIQhFqFPIDRqs\n1fqT+B9FUBoYXV7B/8tVceFAIeHvIA/b5s1Kl7rsh5S9wsfrZCpMZHUoq6mp\ntU+GWoh5NeuilrYz7iQTQTeNr29I8+JmJ+8p0WVVzS1H6pzyQKXPcDl/5lOk\nLOGU/x+5jlXcC/xhFgZ2gLSMShkaV6RkjEqdQwdMRlREqE4pvH/iD+pig/yg\nz5Nr1dBRvLYbIHhvUJR53cTm5jhJE6LscUDQFRIWHEEHENN/QTi/pkjbeYNX\n5Zo+OoL3I+q67mpyyMyrJejgwemBYUPe4QSGRwEea0Jm5D7Sfq5ogPfKV60K\nWh+JRazsxAnKyzSXzXXREXCqe1Kx3xtgD7NJoGEPe5Sr7K7ViDYFRLsJq+6y\nPPeqsfiSp3ZXIx1PM9nJNVWfjnHE6vL67aqlWhOrP2xoSqyr4bNGVa5qG591\nPM3I7zbVvtQOxrP3ghXWH3zYwKFu7wwdeBAz5ZulWlAr4QhbeEA87vqJkV4+\nX8CT\r\n=npLl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8JJY0H2mmMiX5bL/Oe4HRgz6eagTEqK46BIei2mZmzAiA6OcJqdGKra6j7DewLcrgdKxe7Srjfk9O/wi1Jwq0kbw=="}]},"maintainers":[{"name":"charlespick","email":"charles@codemix.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-intl-formatted-duration_3.0.0_1529615977080_0.3673741841780782"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-21T21:19:36.991Z","3.0.0":"2018-06-21T21:19:37.225Z","modified":"2022-04-05T00:03:59.208Z"},"maintainers":[{"email":"charles@codemix.com","name":"charlespick"}],"description":"React intl component to express time duration","homepage":"https://github.com/en-japan-air/react-intl-formatted-duration","keywords":["duration","react","intl","format"],"repository":{"type":"git","url":"git+https://github.com/en-japan-air/react-intl-formatted-duration.git"},"bugs":{"url":"https://github.com/en-japan-air/react-intl-formatted-duration/issues"},"license":"MIT","readme":"# Formatted Duration\n\n> Note: Hopefully temporary fork from https://github.com/en-japan-air/react-intl-formatted-duration until [this PR](https://github.com/en-japan-air/react-intl-formatted-duration/pull/10) lands.\n\n---\n\n[react-intl](https://github.com/yahoo/react-intl) is an amazing library providing React components and API to localize your application, however it lacks a `Duration` component.\n\nIf you want to show the time it takes to do something like `1 minute` or `5 minutes` or even a simple timer `0:30` you're [out of luck](https://github.com/yahoo/react-intl/issues/77) because the ECMA committee hasn't specified the [DurationFormat](https://github.com/tc39/ecma402/issues/47) yet.\n\nThis component provides a very simple abstraction that works on React (DOM), React Native and any other target environment to format simple durations.\n\n## Usage\n\n`yarn add @codemix/react-intl-formatted-duration`\n\n### Extended format\n\n```js\n// Using React DOM\nimport React from 'react';\nimport FormattedDuration from '@codemix/react-intl-formatted-duration';\n\nimport styled from 'styled-components';\nconst Text = styled.span``;\n\nexport default MyComponent() {\n  return <FormattedDuration seconds={60} textComponent={Text} />\n  // will render `1 minute`\n}\n```\n\nThe default format only shows minutes and seconds. For more complex needs check the [custom format section](#Custom_format).\n\nIt's not necessary to use styled components, you can use any component you like available on your target environment\n\n```js\n// Using React Native\nimport React from 'react';\nimport FormattedDuration from '@codemix/react-intl-formatted-duration';\n\nimport { Text } from 'react-native';\n\nexport default MyComponent() {\n  return <FormattedDuration seconds={60} textComponent={Text} />\n  // will render `1 minute`\n}\n```\n\n#### Styling numbers\n\nIf you want to style numbers differently from text you can pass a `valueComponent`\n\n```js\n<FormattedDuration seconds={90} textComponent={Text} valueComponent={Value} />\n\n// renders\n\n<Value>1</Value> <Text>minute</Text> <Value>30</Value> <Text>seconds</Text>\n```\n\nHaving different components is useful not only for styling. Some languages use different [numbering systems](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat). For example Japanese has full-width numbers, so you might want to render `１０分` instead of `10分`, to do so you can use:\n\n```js\nimport React from 'react';\nimport { FormattedNumber } from 'react-intl';\nimport FormattedDuration from 'react-intl-formatted-duration';\n\n/*\nYou'll also need to select Japanese locale and configure the IntlProvider to use\n`ja-JP-u-nu-fullwide`\n\nSomewhere in you application\nimport { IntlProvider } from 'react-intl';\n<IntlProvider\n   locale=\"ja-JP-u-nu-fullwide\"\n/>\n */\n\nexport default MyComponent() {\n  return <FormattedDuration seconds={600} textComponent={Text} valueComponent={FormattedNumber} />\n  // will render `１０分`\n}\n```\n\n### Custom format\n\n#### Hours and days\n\nBy default the component only renders minutes and seconds, if you want to display hours or days you can use a custom format:\n\n```js\n<FormattedDuration seconds={180000} textComponent={Text} format=\"{days} {hours} {minutes} {seconds}\" />\n// will render `2 days 2 hours`\n\n<FormattedDuration seconds={180000} textComponent={Text} format=\"{hours} {minutes} {seconds}\" />\n// will render `50 hours`\n\n<FormattedDuration seconds={180000} textComponent={Text} format=\"{minutes} {seconds}\" />\n// will render `3000 minutes`\n}\n```\n\nSeconds is also optional and if missing, minutes will be rounded to the closed value\n\n```js\n<FormattedDuration seconds={10} textComponent={Text} format=\"{minutes}\" />\n// will render `0 minutes`\n\n<FormattedDuration seconds={30} textComponent={Text} format=\"{minutes}\" />\n// will render `1 minute`\n\n<FormattedDuration seconds={70} textComponent={Text} format=\"{minutes}\" />\n// will render `1 minute`\n```\n\nThe custom format can itself be localized by passing a message id instead of the actual value\n\n```js\nimport React from 'react';\nimport FormattedDuration from 'react-intl-formatted-duration';\n\nimport messages from './messages';\n\nexport default MyComponent() {\n  return (\n    <FormattedDuration\n      seconds={600}\n      textComponent={Text}\n      format={messages.customFormat.id}\n    />\n  );\n}\n```\n\n#### Timer format\n\n```js\nimport FormattedDuration, { TIMER_FORMAT } from 'react-intl-formatted-duration';\n\nexport default MyComponent() {\n  return <FormattedDuration seconds={60} textComponent={Text} format={TIMER_FORMAT} />;\n  // will render `1:00`\n}\n```\n\n### Without components\n\n`react-intl-formatted-duration` exports two methods `formatDuration` and `formatDurationToParts` if you need to use the string directly without using a react component.\nIt accepts the same arguments as `FormattedDuration` except for `textComponent` and `valueComponent`.\nThe first argument of those two functions is an `intl` instance from react-intl. The second argument is the duration in seconds. The third argument is any other argument as an option object.\n\n`formatDuration` works exactly like FormattedDuration but returns the formatted duration as a string.\n\n```js\nimport { formatDuration, TIMER_FORMAT } from \"react-intl-formatted-duration\";\n\nconst formatted = formatDuration(intl, /* seconds = */ 60, {\n  format: TIMER_FORMAT\n});\n// returns '1:00'\n```\n\n`formatDurationToParts` works like `formatDurationToParts` but returns the formatted duration as an array of tokens. Similar to what [DateTimeFormat#formatToParts](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts) produces\n\n```js\nimport { formatDuration, TIMER_FORMAT } from \"react-intl-formatted-duration\";\n\nconst formatted = formatDuration(intl, /* seconds = */ 60, {\n  format: TIMER_FORMAT\n});\n// returns [\n//   { type: 'minutes', value: '1' },\n//   { type: 'literal', value: ':' },\n//   { type: 'seconds', value: '00' },\n// ]\n```\n\n## Localization\n\n`react-intl-formatted-duration` expects the following keys inside your translation file\n\n- `react-intl-formatted-duration.longFormatting` the default format that generates something like `1 minute 30 seconds`. It uses the values `{days}`, `{hours}`, `{minutes}` and `{seconds}`. For example you can change it to `{minutes} and {seconds}`.\n- `react-intl-formatted-duration.duration` the format used by the `minutes` and `seconds` variables described above. It uses the values `{value}` and `{unit}`. The default is `{value} {unit}` where `value` is a number and `{unit}` is the textual unit like `minute(s)` or `second(s)`.\n- `react-intl-formatted-duration.timerFormatting` format for `TIMER_FORMAT`, defaults to `{minutes}:{seconds}` where both values are numbers padded to have a minimum length of 2 characters\n- `react-intl-formatted-duration.daysUnit` string for formatting days, default `{value, plural, one {# day} other {# days}}`\n- `react-intl-formatted-duration.hoursUnit` string for formatting hours, default `{value, plural, one {# hour} other {# hours}}`\n- `react-intl-formatted-duration.minutesUnit` string for formatting minutes, default `{value, plural, one {# minute} other {# minutes}}`\n- `react-intl-formatted-duration.secondsUnit` string for formatting seconds, default `{value, plural, one {# second} other {# seconds}}`\n\nThe messages for `daysUnit`, `hoursUnit`, `minutesUnit`, `secondsUnit` use the [format-js syntax](https://formatjs.io/guides/message-syntax/).\n\nIf you're using the `extract-intl` script from [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate) you can import `react-intl-formatted-duration/messages` to automatically generate the keys in your translation files.\n\n## Upgrading from version 1.0\n\nVersion `2.x` allows to use the whole power of format-js message syntax. All you need to do is remove all keys like `daysSingular`, `dayPlural` and simply use `daysUnit` with the format described above.\n","readmeFilename":"README.md"}