{"_id":"@alexartisan/react-native-globalize","_rev":"1-8c0a13dc20f7bd8a9577b1497b1d00d4","name":"@alexartisan/react-native-globalize","dist-tags":{"latest":"1.2.4-beta.1"},"versions":{"1.2.4-beta.1":{"name":"@alexartisan/react-native-globalize","version":"1.2.4-beta.1","description":"Globalization helper for React Native","author":{"name":"Josh Swan","email":"josh@sportifik.com"},"main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/AlexArtisan/react-native-globalize.git"},"bugs":{"url":"https://github.com/AlexArtisan/react-native-globalize/issues"},"keywords":["react native","internationalization","globalization","localization","i18n","l10n"],"scripts":{"cldr":"gulp cldr","lint":"eslint lib/**/*.js","test":"npm run lint"},"dependencies":{"cldrjs":"^0.5.0","globalize":"github:joshswan/globalize","moment":"^2.19.3","prop-types":"^15.5.10"},"devDependencies":{"babel-eslint":"^7.2.3","cldr-data":"^32.0.1","eslint":"^3.19.0","eslint-config-airbnb":"^14.1.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"^4.0.0","eslint-plugin-react":"^6.10.3","gulp":"^3.9.1","gulp-filter":"^5.0.0","gulp-merge-json":"^1.0.0","rimraf":"^2.5.2"},"peerDependencies":{"react":">=14.5.0","react-native":">=0.25.0"},"license":"MIT","gitHead":"b6116ab2ba994e9c8b42c8c10531b67661faf12f","homepage":"https://github.com/AlexArtisan/react-native-globalize#readme","_id":"@alexartisan/react-native-globalize@1.2.4-beta.1","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Bq7/jYKpFB874BFxWpdSoBAykO38jHoxihi9sj86EPeS7J5o2giolJCQUn6LPficQ0qYKY88s9qoZcB2qC6jAw==","shasum":"fc413a77b23584dd5791e2d675f99a46c8a9d6cf","tarball":"https://registry.npmjs.org/@alexartisan/react-native-globalize/-/react-native-globalize-1.2.4-beta.1.tgz","fileCount":14,"unpackedSize":43967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeaXWCRA9TVsSAnZWagAAYGwP/AqCShnksHNH8wrHHmpm\noHfCuHoluuMBcrLY9SAY6eNqGff1YxKQJq/XTO8pw36CtiWy/E9FT0kC0xKn\ncoD9qVulvLzjA7hqM4VsCqDTJjShTtz8uPS7XNZCgP6jY9/4HYJUP48vF0y8\nHm6QVDoxQwKrA98mrM4+JGLBWQ9kP5hu1IAKMklnUifipXeH2TITZyKwirLp\nlnkzu493WVRXvma/g0kvxMWga8AZkY22dQ+QAYwEpzhv2N+Qc90KlkfkxMY1\nc0J+tYL5PubVB85BDzchFKfEI2342mcFF96acrV8gJLixGRBjRBNKQYd9cFI\n6+TADNc2JNM6/+5XYlxvr7+b+mIJbyGmqhe2Dmay0EMgBAkoZiHcO/rgLFqQ\nm8zbUaVXilxMkfujKBGn7bJu/PldXtpuD+PlXwCU8o/yxLDpRhMQzQQVZqDu\nApcAd9SP3796UzJDZTbo48pMk3PR056P4QySRE3Vos2SqWpeXQ6uLFk+b7SD\ndn/ey+wfgB5U/9SMl1NSTv2dMV/YnUFWUkJ7KfT2XQNJJVVfj6trDByrKa6j\npPwgUeW7JG+Dad1OaA4q/c4FaEfv6T+dCZ/QkF7Ukf/giX6nu/ezwlol00JV\no0Ry6IoqDZwPQ0mb97v38KgN9sDqlJNyvzP6mEi4OvaPVexLGA83fy1823Z9\nLWoO\r\n=iA0u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6+tiz3pRczQiThqt/pj1uDLHQt9u/chH9y+4beYmy1AiEAtEOR9CbowDHGq6dSOMsqUMWUKxSNo/LDRwv9LiphoPg="}]},"maintainers":[{"name":"alexartisan","email":"strangleting@gmail.com"}],"_npmUser":{"name":"alexartisan","email":"strangleting@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-globalize_1.2.4-beta.1_1601807830398_0.8675724865705547"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-04T10:37:10.360Z","1.2.4-beta.1":"2020-10-04T10:37:10.515Z","modified":"2022-04-04T12:39:18.334Z"},"maintainers":[{"name":"alexartisan","email":"strangleting@gmail.com"}],"description":"Globalization helper for React Native","homepage":"https://github.com/AlexArtisan/react-native-globalize#readme","keywords":["react native","internationalization","globalization","localization","i18n","l10n"],"repository":{"type":"git","url":"git+https://github.com/AlexArtisan/react-native-globalize.git"},"author":{"name":"Josh Swan","email":"josh@sportifik.com"},"bugs":{"url":"https://github.com/AlexArtisan/react-native-globalize/issues"},"license":"MIT","readme":"# React Native Globalize\n[![NPM Version][npm-image]][npm-url] [![Build Status][build-image]][build-url] [![Dependency Status][depstat-image]][depstat-url] [![Dev Dependency Status][devdepstat-image]][devdepstat-url]\n\nSimple globalization library for React Native. Provides access to all formatting options as well as easy-to-use React Native components.\n\n## How does it work?\n\nBecause it's based on the jQuery Globalize project, React Native Globalize can format and parse numbers, format and parse dates, format currency, and format messages (using the ICU message pattern) using the correct plural rules for the language/locale. Take a look at https://github.com/jquery/globalize for more information.\n\nThe important thing to note is all this functionality depends entirely on CLDR data. While a huge number of languages/locales and currencies are available in this data, only some are loaded by default. This is done for performance reasons as loading hundreds of megabytes of CLDR data would massively inflate app bundle sizes and startup times. The default languages and currencies are listed below, and you can always [pass additional CLDR data](#formattedwrapper) directly if you need additional language/locale or currency support. Using the default configuration should only increase your bundle size by about 1MB and negligibly affect startup time, but if you want more control, customize!\n\n**Want to customize the included locales and/or currencies?** Just fork the repo, edit the two arrays in `gulpfile.js` to suit your needs, run `gulp cldr`, and you've got your own custom version with only what you need.\n\n#### Default Locales & Currencies\n```javascript\nconst locales = [\n  'am',           // Amharic\n  'ar',           // Arabic\n  'bg',           // Bulgarian\n  'bn',           // Bengali\n  'ca',           // Catalan\n  'cs',           // Czech\n  'da',           // Danish\n  'de',           // German\n  'el',           // Greek\n  'en',           // English (United States)\n  'en-GB',        // English (Great Britain)\n  'es',           // Spanish\n  'es-419',       // Spanish (Latin America & Caribbean)\n  'et',           // Estonian\n  'fa',           // Persian\n  'fi',           // Finnish\n  'fil',          // Filipino\n  'fr',           // French\n  'gu',           // Gujarati\n  'he',           // Hebrew\n  'hi',           // Hindi\n  'hr',           // Croatian\n  'hu',           // Hungarian\n  'id',           // Indonesian\n  'it',           // Italian\n  'ja',           // Japanese\n  'kn',           // Kannada\n  'ko',           // Korean\n  'lt',           // Lithuanian\n  'lv',           // Latvian\n  'ml',           // Malayalam\n  'mr',           // Marathi\n  'ms',           // Malay\n  'nb',           // Norwegian\n  'nl',           // Dutch\n  'pl',           // Polish\n  'pt',           // Portuguese\n  'pt-PT',        // Portuguese (Portugal)\n  'ro',           // Romanian\n  'ru',           // Russian\n  'sk',           // Slovak\n  'sl',           // Slovenian\n  'sr',           // Serbian\n  'sv',           // Swedish\n  'sw',           // Swahili\n  'ta',           // Tamil\n  'te',           // Telugu\n  'th',           // Thai\n  'tr',           // Turkish\n  'uk',           // Ukrainian\n  'vi',           // Vietnamese\n  'zh',           // Chinese\n  'zh-Hans',      // Chinese (Simplified)\n  'zh-Hant',      // Chinese (Traditional)\n];\n\nconst currencies = [\n  'CAD',          // Canadian Dollar\n  'EUR',          // Euro\n  'GBP',          // British Pound\n  'USD',          // US Dollar\n];\n```\n\n## Usage\n\nUse `FormattedWrapper` at the root of your application to propagate the required context to all components. Alternatively, include `getChildContext()` in your own component (see [FormattedWrapper](lib/components/FormattedWrapper.js) for an example). Then use any of the included components or access the formatting functions directly from the React Context (see below) anywhere in your application.\n\n### FormattedWrapper\n#### Props\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `locale` | `String` | `en` | The language/locale to be used for formatting. |\n| `currency` | `String` | `USD` | The default currency code to be used for currency formatting. |\n| `messages` | `Object` | | ICU-formatted messages for use with `FormattedMessage` and `getMessageFormatter`. |\n| `cldr` | `Array` | | Additional CLDR data to load (e.g. `cldr={[require('path/to/file.json'), require('path/to/anotherFile.json')]}`). |\n| `localeFallback` | `Boolean` | `false` | Automatically attempt to find a fallback when CLDR data for the selected locale is missing (e.g. `en_NZ` -> `en`). |\n| `warnOnMissingMessage` | `Boolean` | `true` | Display a warning message when a message key is missing. |\n\n```javascript\nimport { FormattedWrapper } from 'react-native-globalize';\n\nconst Messages = {\n  en: {\n    hello: 'Hello',\n  },\n  es: {\n    hello: 'Hola',\n  },\n};\n\nclass MyApp extends Component {\n  render() {\n    return (\n      <FormattedWrapper locale=\"en\" currency=\"USD\" messages={Messages}>\n        <App />\n      </FormattedWrapper>\n    )\n  }\n}\n```\n\n### FormattedCurrency\n\n#### Props\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `value` | `Number` | | ***Required.*** The number you want to format. |\n| `currency` | `String` | | Defaults to currency set on `FormattedWrapper`. |\n| `style` | `TextStyle` | | Styles to apply to resulting `Text` node. |\n| `minimumFractionDigits` | `Int` | | Non-negative integer indicating the minimum fraction digits to be shown. Numbers will be rounded or padded with trailing zeroes as necessary. *This overrides the default minimum fraction digits derived from CLDR.* |\n| `maximumFractionDigits` | `Int` | | Non-negative integer indicating the maximum fraction digits to be shown. Numbers will be rounded or padded with trailing zeroes as necessary. *This overrides the default maximum fraction digits derived from CLDR.* |\n| `numberStyle` | `String` | `symbol` | Formatting style to use when displaying currency. Values: `symbol` ($1.00), `accounting`, `code` (1.00 USD), or `name` (1.00 US dollar). |\n| `round` | `String` | `round` | Rounding method: `ceil`, `floor`, `round`, or `truncate`.\n| `useGrouping` | `Boolean` | `true` | Whether a grouping separator should be used. *This overrides the language default derived from CLDR.* |\n\n```javascript\nimport { FormattedCurrency } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedCurrency\n        value={9.99}\n        currency=\"USD\"\n        style={{ color: 'red' }} />\n    );\n  }\n}\n// $9.99\n```\n\n### FormattedDate\n\n#### Props\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `value` | `Date` | | ***Required.*** The date object you want to format. |\n| `style` | `TextStyle` | | Styles to apply to resulting `Text` node. |\n| `skeleton` | `String` | | Date format skeleton. See the [CLDR documentation](http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). *Not all options work* |\n| `date` | `String` | | One of: `full`, `long`, `medium`, `short`. Outputs just a date (e.g. `Monday, November 1, 2010`). |\n| `time` | `String` | | One of: `full`, `long`, `medium`, `short`. Outputs just a time (e.g. `5:55:00 PM GMT-02:00`). |\n| `datetime` | `String` | | One of: `full`, `long`, `medium`, `short`. Outputs a datetime (e.g. `Monday, November 1, 2010 at 5:55:00 PM GMT-02:00`). |\n\n***Only ONE of `skeleton`, `date`, `time`, and `datetime` should be specified.***\n\n```javascript\nimport { FormattedDate } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedDate\n        value={new Date()}\n        style={{ color: 'red' }}\n        skeleton=\"yMd\" />\n    );\n  }\n}\n// 12/31/2015\n```\n\n### FormattedMessage\nFormat a message based on the ICU message format pattern and variables.\n\n#### Props\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `message` | `Array/String` | | ***Required.*** The key of the message you want to format. Can be passed as a string (e.g. test/hello) or an array (e.g. ['test', 'hello']). |\n| `values` | `Object` | `{}` | Variables for replacement/formatting. |\n| `defaultMessage` | `String` | | A string to display if the message key does not exist. Otherwise, the message key itself will be displayed. |\n| `style` | `TextStyle` | | Styles to apply to resulting `Text` node. |\n\n* Values/variables can also be passed as props. Any additional props other than the 4 above will be merged with the `values` object. *Note: Specific props will override the `values` object if both are given and keys collide.*\n* Values ***can also be components***. See the last example below.\n* See [ICU message formatting guidelines](http://userguide.icu-project.org/formatparse/messages) for more info.\n\n```javascript\n// Messages added via FormattedWrapper\nconst Messages = {\n  en: {\n    hello: 'Hey {first} {middle} {last},',\n    test: {\n      select: '{gender, select, female {{host} invites {guest} to her party} male {{host} invites {guest} to his party} other {{host} invites {guest} to their party}}',\n      plural: 'You have {count, plural, one {one task} other {{count} tasks}} remaining',\n      component: 'Hey {name}, you asked me to remind you about {item} at {time}!',\n    },\n  },\n};\n\n// Example 1\nimport { FormattedMessage } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedMessage\n        message=\"hello\"\n        first=\"John\"\n        middle=\"William\"\n        last=\"Smith\"\n        style={{ color: 'red' }} />\n    );\n  }\n}\n// Hey John William Smith,\n\n// Example 2\nimport { FormattedMessage } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedMessage\n        message=\"test/select\"\n        values={{ gender: 'male', host: 'Josh', guest: 'Andrea' }}\n        style={{ color: 'red' }} />\n    );\n  }\n}\n// Josh invites Andrea to his party\n\n// Example 3\nimport { FormattedMessage } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedMessage\n        message={['test', 'select']}\n        gender=\"female\"\n        host=\"Jennifer\"\n        guest=\"Michael\"\n        style={{ color: 'red' }} />\n    );\n  }\n}\n// Jennifer invites Michael to her party\n\n// Example 4\nimport { FormattedMessage } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedMessage\n        message=\"test/plural\"\n        values={{ count: 4 }}\n        style={{ color: 'red' }} />\n    );\n  }\n}\n// You have 4 tasks remaining\n\n// Example 5\nimport { FormattedMessage } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedMessage\n        message=\"test/component\"\n        name=\"Josh\"\n        item=\"buying groceries\"\n        time={<FormattedDate value={new Date()} time=\"short\" />} />\n    );\n  }\n}\n// Hey Josh, you asked me to remind you about buying groceries at 4:00 PM\n```\n\n### FormattedNumber\n\n#### Props\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `value` | `Number` | | ***Required.*** The number you want to format. |\n| `style` | `TextStyle` | | Styles to apply to resulting `Text` node. |\n| `minimumFractionDigits` | `Int` | | Non-negative integer indicating the minimum fraction digits to be shown. Numbers will be rounded or padded with trailing zeroes as necessary. *This overrides the default minimum fraction digits derived from CLDR.* |\n| `maximumFractionDigits` | `Int` | | Non-negative integer indicating the maximum fraction digits to be shown. Numbers will be rounded or padded with trailing zeroes as necessary. *This overrides the default maximum fraction digits derived from CLDR.* |\n| `numberStyle` | `String` | `decimal` | Formatting style to use for displaying number. Values: `decimal` (0.5), `percent` (50%). |\n| `round` | `String` | `round` | Rounding method: `ceil`, `floor`, `round`, or `truncate`.\n| `useGrouping` | `Boolean` | `true` | Whether a grouping separator should be used. *This overrides the language default derived from CLDR.* |\n\n```javascript\nimport { FormattedNumber } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedNumber\n        value={1.5}\n        minimumFractionDigits={2}\n        style={{ color: 'red' }} />\n    )\n  }\n}\n// 1.50\n\n// Arabic (ar) selected\nimport { FormattedNumber } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedNumber\n        value={3.141592}\n        style={{ color: 'red' }} />\n    )\n  }\n}\n// ٣٫١٤٢\n```\n\n### FormattedPlural\n\n#### Props\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `value` | `Number` | | ***Required.*** The value you want to base plural selection on. |\n| `style` | `TextStyle` | | Styles to apply to resulting `Text` node. |\n| `other` | `Node` | | Node to output when plural type is `other` or when node for type is not specified. |\n| `zero` | `Node` | | Node to output when plural type is `zero`. |\n| `one` | `Node` | | Node to output when plural type is `one`. |\n| `two` | `Node` | | Node to output when plural type is `two`. |\n| `few` | `Node` | | Node to output when plural type is `few`. |\n| `many` | `Node` | | Node to output when plural type is `many`. |\n\n```javascript\nimport { FormattedPlural } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedPlural\n        value={0}\n        zero={<Text>:(</Text>}\n        other={<Text>:)</Text>} />\n    );\n  }\n}\n// :(\n```\n\n### FormattedRelativeTime\n\n#### Props\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| `value` | `Date` | | ***Required.*** The date you want to use to compute the difference from. |\n| `unit` | `String` | | ***Required.*** One of: `best`, `second`, `minute`, `hour`, `day`, `week`, `month`, `year`. |\n| `style` | `TextStyle` | | Styles to apply to resulting `Text` node. |\n| `form` | `Mixed`  | | One of: `short`, `narrow`, `0`, `false`. Change output type. |\n\n```javascript\nimport { FormattedRelativeTime } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      <FormattedRelativeTime\n        value={myDateObject}\n        unit=\"best\"\n        style={{ color: 'red' }} />\n    );\n  }\n}\n// 2 days ago\n```\n\n### FormattedTime\n\nSee [`FormattedDate`](#formatteddate). All props and functionality are identical.\n\n### Context\nYou can access formatting functions via the context should you need programmatic access to the results or if a component is not appropriate. For this to work, you must still have `FormattedWrapper` at the root of you application, or you must be providing an alternative `getChildContext` in a parent component.\n\n```javascript\nimport { PropTypes } from 'react-native-globalize';\n\nclass MyComponent extends Component {\n  myFunction() {\n    const dateFormatter = this.context.globalize.getDateFormatter({skeleton: 'yMd'});\n    const formattedDate = dateFormatter(new Date());\n\n    const currencyFormatter = this.context.globalize.getCurrencyFormatter('USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 });\n    const formattedCurrency = currencyFormatter(9.99);\n  }\n}\n\nMyComponent.contextTypes = {\n  globalize: PropTypes.globalizeShape,\n};\n```\n\n### Globalize\nA few static methods are also available on the Globalize class. You can check whether CLDR data has been loaded for a given locale, get an array of all loaded locales, load additional CLDR data, and load additional ICU-formatted messages. Check out the examples below.\n\n```javascript\nimport { Globalize } from 'react-native-globalize';\n\n// Check if a locale has CLDR data\nGlobalize.localeIsLoaded('en');\n// true\n\n// Get an array of all loaded locales\nGlobalize.availableLocales();\n// [ 'am', 'ar', ... ]\n\n// Load additional CLDR data\nGlobalize.load([require('path/to/cldr/file.json')]);\n\n// Load additional messages\nGlobalize.loadMessages({\n  en: {\n    test: 'Hi Josh!',\n  },\n});\n```\n\n## License\n\n```\n Copyright (c) 2015-2018 Josh Swan\n\n Licensed under the The MIT License (MIT) (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n    https://raw.githubusercontent.com/joshswan/react-native-globalize/master/LICENSE\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n```\n\n[build-url]: https://travis-ci.org/joshswan/react-native-globalize\n[build-image]: https://travis-ci.org/joshswan/react-native-globalize.svg?branch=master\n[depstat-url]: https://david-dm.org/joshswan/react-native-globalize\n[depstat-image]: https://david-dm.org/joshswan/react-native-globalize.svg\n[devdepstat-url]: https://david-dm.org/joshswan/react-native-globalize#info=devDependencies\n[devdepstat-image]: https://david-dm.org/joshswan/react-native-globalize/dev-status.svg\n[npm-url]: https://www.npmjs.com/package/react-native-globalize\n[npm-image]: https://badge.fury.io/js/react-native-globalize.svg\n","readmeFilename":"README.md"}