The monorepo home to all of the FormatJS related libraries, most notably react-intl.

Overview

FormatJS

Unit + Karma Tests Slack FormatJS

Sauce Browser Matrix Status

This repository is the home of FormatJS and related libraries.

Slack: Join us on Slack at formatjs.slack.com for help, general conversation and more 💬 🎊 🎉 You can sign-up using this invitation link.

Development

We currently use bazel to develop, along with lerna for package management.

To setup locally, first initialize the git submodule:

git submodule init
git submodule update

Now you can build & test with npm:

npm i && npm run build && npm run test

To run examples:

npm run examples

To build/test individual package:

bazel build //packages/react-intl
bazel test //packages/react-intl

Releases can be done with the following steps (must use npm):

npm run release

To publish next tag (must use npm):

npm run release:next

Published Packages

Package Version Changelog License
@formatjs/cli version CHANGELOG MIT
@formatjs/ecma402-abstract version CHANGELOG MIT
@formatjs/icu-messageformat-parser version CHANGELOG MIT
@formatjs/intl-datetimeformat version CHANGELOG MIT
@formatjs/intl-displaynames version CHANGELOG MIT
@formatjs/intl-getcanonicallocales version CHANGELOG MIT
@formatjs/intl-listformat version CHANGELOG MIT
@formatjs/intl-locale version CHANGELOG MIT
@formatjs/intl-numberformat version CHANGELOG MIT
@formatjs/intl-pluralrules version CHANGELOG MIT
@formatjs/intl-relativetimeformat version CHANGELOG MIT
@formatjs/ts-transformer version CHANGELOG MIT
babel-plugin-formatjs version CHANGELOG MIT
eslint-plugin-formatjs version CHANGELOG MIT
intl-messageformat version CHANGELOG BSD
react-intl version CHANGELOG BSD

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs

Comments
  • [RFC] React Intl v2

    [RFC] React Intl v2

    UPDATED: 2015-11-11

    React Intl v2 has been in development for several months and the current release is v2.0.0-beta-1 — the first v2 beta release — v2 has been promoted from preview release to beta because we feel it's now feature complete and ready to move forward towards a release candidate once the test suite has been filled out and the docs have been updated.

    With v1 being out almost a year we've received tons of great feedback from everyone using React Intl and with these changes we're addressing 20+ issues that have been raised — they're label: fixed-by-v2. While 20-some issues doesn't seem like a lot, many of these are very long discussions fleshing out better ways to approach i18n in React and web apps in general. With v2 we're rethinking what it means to internationalize software…

    The Big Idea

    ECMA 402 has the following definition of internationalization:

    "Internationalization of software means designing it such that it supports or can be easily adapted to support the needs of users speaking different languages and having different cultural expectations [...]"

    The usual implementation looks something like this:

    1. Extract strings from source code
    2. Put all strings in a single, large, strings file
    3. Use identifiers in source code to reference strings

    This ends up leading to an unpleasant dev experience and problems:

    • Jumping between source and strings files
    • Cruft accumulation, hard to cull strings once added
    • Missing context for translators on how strings are used in the UI

    There's a great discussion in #89 on the problems listed above and how to resolve them. With v2, we've rethought this premise of needing to define strings external to the React Components where they're used…

    Implementation of Internationalization with React Intl v2:

    1. Declare default messages/strings in source code (React Components)
    2. Use tooling to extract them at build-time

    This new approach leads to a more pleasant dev experience and the following benefits:

    • Strings are colocated with where they're used in the UI
    • Delete a file, its strings are cleaned up too (no obsolete translations)
    • Provides a place to describe the context to translators

    Default Message Declaration and Extraction

    React Intl v2 has a new message descriptor concept which is used to define your app's default messages/strings:

    • id: A unique, stable identifier for the message
    • description: Context for the translator about how it's used in the UI
    • defaultMessage: The default message (probably in English)

    Declaring Default Messages

    The <FormattedMessage> component's props now map to a message descriptor, plus any values to format the message with:

    <FormattedMessage
        id="greeting"
        description="Welcome greeting to the user"
        defaultMessage="Hello, {name}! How are you today?"
        values={{name: this.props.name}}
    />
    

    defineMessages() can also be used to pre-declare messages which can then be formatted now or later:

    const messages = defineMessages(
        greeting: {
            id: 'greeting',
            description: 'Welcome greeting to the user',
            defaultMessage: 'Hello, {name}! How are you today?',
        }
    });
    
    <FormattedMessage {...messages.greeting} values={{name: this.props.name}} />
    

    Extracting Default Messages

    Now that your app's default messages can be declared and defined inside the React components where they're used, you'll need a way to extract them.

    The extraction works via a Babel plugin: babel-plugin-react-intl. This plugin will visit all of your JavaScript (ES6) modules looking for ones which import either: FormattedMessage, FormattedHTMLMessage, or defineMessage from "react-intl". When it finds one of these being used, it will extract the default message descriptors into a JSON file and leave the source untouched.

    Using the greeting example above, the Babel plugin will create a JSON file with the following contents:

    [
        {
            "id": "greeting",
            "description": "Welcome greeting to the user",
            "defaultMessage": "Hello, {name}! How are you today?"
        }
    ]
    

    With the extracted message descriptors you can now aggregate and process them however you'd like to prepare them for your translators.

    Providing Translations to React Intl

    Once all of your app's default messages have been translated, you can provide them to React Intl via the new <IntlProvider> component (which you'd normally wrap around your entire app):

    const esMessages = {
        "greeting": "¡Hola, {name}! ¿Cómo estás hoy?"
    };
    
    ReactDOM.render(
        <IntlProvider locale="es" messages={esMessages}>
            <App />
        </IntlProvider>,
        document.getElementById('container')
    );
    
    

    Note: In v2 things have been simplified to use a flat messages object. Please let us know if you think this would be problematic. (See: https://github.com/yahoo/react-intl/issues/193#issuecomment-152019363)

    Try: The Translations example in the repo to see how all this works (be sure to check the contents of the build/ dir after you run the build.)

    Automatic Translation Fallbacks

    Another great benefit to come out of this approach is automatic fallback to the default message if a translation is missing or something goes wrong when formatting the translated message. A major pain-point we faced at Yahoo which every app experienced was not wanting to wait for new translations to be finished before deploying, or placeholders like {name} getting translated to {nombre} accidentally.

    Message formatting in v2 now follows this algorithm:

    1. Try to format the translated message
    2. If that fails, try to format the default message
    3. If either the translated or default message was formatted, return it.
    4. Otherwise, fallback to the unformatted message or its id.

    Other Major Changes

    For v2, React Intl has been completely re-thought re-written here are the highlights of the major changes:

    Simpler Model for Single-Language Apps

    React Intl is useful for all apps, even those which only need to support one language. In v2 we've created a simpler model developer's building single-language apps to integrate React Intl. The message formatting features in React Intl are the most complex and are most useful for multi-language apps, but all apps will use pluralization.

    In v2 the lower-level pluralization features that message formatting are built on are now exposed as a first-class feature. This allows a single-language app to have pluralization support without the complexity of messages:

    <p>
        Hello <b>{name}</b>, you have {' '}
        <FormattedNumber value={unreadCount} /> {' '}
        <FormattedPlural value={unreadCount}
            one="message"
            other="messages"
        />.
    </p>
    

    You can think of <FormattedPlural> like a switch statement on its value, with: zero, one, two, few, and many props as cases and other as the default case. This matches the standard ICU Pluralization rules.

    Note: Both cardinal and ordinal formatting are supported via the style prop, cardinal is the default.

    Try: The Hello World example in the repo to see <FormattedPlural> in action.

    Components

    <IntlProvider>

    This is the new top-level component which your app's root component should be a child of. It replaces the adding the mixin to your app's root component and provides React Intl's API to decedents via React's component context. It takes the following props to configure the intl API and context (all optional):

    • locale: The user's current locale (now singular, defaults to "en")
    • formats: Object of custom named format options for the current locale
    • messages: {id: 'translation'} collection of translated messages for the current locale
    • defaultLocale: The app's default locale used in message formatting fallbacks (defaults to "en")
    • defaultFormats: Object of custom named format options for the defaultLocale
    • initialNow: A reference time for "now" used on initial render of <FormattedRelative> components.

    For this component to work the context needs to be setup properly. In React 0.14 context switched to parent-based from owner-based, so <IntlProvider> must be your app's parent/ancestor in React 0.14. React Intl v2 will not support React 0.13.

    <IntlProvider>
        <App />
    </IntlProvider>
    

    Note: How there's no defaultMessages prop, that's because it's assumed the default message descriptors live co-located to where the messages are being formatted.

    See: The Providing Translations to React Intl section above for how it's used.

    Function-As-Child Support

    There have been many discussions around customizing the rendering of the <Formatted*> components around styling, supporting extras props, and changing the <span> elements that they return. We think of <Fromatted*> components as representations of text.

    Our guidance thus far has been to wrap them and style the wrapper. Thinking forward to a single React Intl for both React [Web] and React Native, we want to be more flexible. Also, issues come when rendering a <span> inside an SVG tree, and requires a <tspan>. To remedy this, in v2 all <Formatted*> components support function-as-child, which receives a React node type value. Which enables the following:

    let now = Date.now();
    
    <FormattedDate value={now}>
        {(formattedNow) => (
            <time dateTime={now} className="fancy-date">{formattedNow}</time>
        )}
    </FormattedDate>
    

    Of course you can always do the following instead, and its valid (and recommended for this example):

    let now = Date.now();
    
    <time dateTime={now} className="fancy-date">
        <FormattedDate value={now} />
    </time>
    

    The above will yield an inner <span>, and that's okay here. But sometimes it's not okay, e.g. when rending an <option> you should use the function-as-child pattern because you don't want the extra <span> since it'll be rendered as literal text:

    let num = 10000;
    
    <FormattedNumber value={num}>
        {(formattedNum) => (
            <option value={num}>{formattedNum}</option>
        )}
    </FormattedNumber>
    

    This pattern can work well for targeted use-cases, but sometimes you just want to call an API to format some data and get a string back, e.g., when rending formatted messages in title or aria attributes; this is where using the new API might be a better choice…

    New API, No More Mixin

    The IntlMixin is gone! And there's a new API to replace it.

    The API works very similar to the one provided by the old mixin, but it now live's on this.context.intl and is created by the <IntlProvider> component and can be passed to your custom components via props by wrapping custom components with injectIntl(). It contains all of the config values passed as props to <IntlProvider> plus the following format*(), all of which return strings:

    • formatDate(value, [options])
    • formatTime(value, [options])
    • formatRelative(value, [options])
    • formatNumber(value, [options])
    • formatPlural(value, [options])
    • formatMessage(messageDescriptor, [values])
    • formatHTMLMessage(messageDescriptor, [values])

    These functions are all bound to the props and state of the <IntlProvider> and are used under the hood by the <Formatted*> components. This means the formatMessage() function implements the automatic translation fallback algorithm (explained above).

    Accessing the API via injectIntl()

    This function is used to wrap a component and will inject the intl context object created by the <IntlProvider> as a prop on the wrapped component. Using the HOC factory function alleviates the need for context to be a part of the public API.

    When you need to use React Intl's API in your component, you can wrap with with injectIntl() (e.g. when you need to format data that will be used in an ARIA attribute and you can't the a <Formatted*> component). To make sure its of the correct object-shape, React Intl v2 has an intlShape module export. Here's how you access and use the API:

    import React, {Component, PropTypes} from 'react';
    import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
    
    const messages = defineMessages({
        label: {
            id: 'send_button.label',
            defaultMessage: 'Send',
        },
        tooltip: {
            id: 'send_button.tooltip',
            defaultMessage: 'Send the message'
        }
    });
    
    class SendButton extends Component {
        render() {
            const {formatMessage} = this.props.intl;
    
            return (
                <button 
                    onClick={this.props.onClick}
                    title={formatMessage(messages.tooltip)}
                >
                    <FormattedMessage {...messages.label} />
                </button>
            );
        }
    }
    
    SendButton.propTypes = {
        intl   : intlShape.isRequired,
        onClick: PropTypes.func.isRequired,
    };
    
    export default injectIntl(SendButton);
    

    Stabilized "now" Time and "ticking" Relative Times

    <IntlProvider> uses an initialNow prop to stabilize the reference time when formatting relative times during the initial render. This prop should be set when rendering a universal/isomorphic React app on the server and client so the initial client render will match the server's checksum.

    On the server, Date.now() should be captured before calling ReactDOM.renderToString() and passed to <IntlProvider>. This "now" value needs to be serialized to the client so it can also pass the same value to <IntlProvider> when it calls React.render().

    Relatives times formatted via <FormattedRelative> will now "tick" and stay up to date over time. The <FormattedRelative> has an initialNow prop to match and override the same prop on <IntlProvider>. It also has a new updateInterval prop which accepts a number of milliseconds for the maximum speed at which relative times should be updated (defaults to 10 seconds).

    Special care has been taken in the scheduling algorithm to display accurate information while reducing unnecessary re-renders. The algorithm will update the relative time at its next "interesting" moment; e.g., "1 minute ago" to "2 minutes ago" will use a delay of 60 seconds even if updateInterval is set to 1 second.

    See: #186

    Locale Data as Modules

    React Intl requires that locale data be loaded and added to the library in order to support a locale. Previously this was done via modules which caused side-effects by automatically adding data to React Intl when they were loaded. This anti-pattern has been replaced with modules that export the locale data, and a new public addLocaleData() function which registers the locale data with the library.

    This new approach will make it much simpler for developers whose apps only support a couple locales and they just want to bundle the locale data for those locales with React Intl and their app code. Doing would look this like:

    import {addLocaleData} from 'react-intl';
    import en from 'react-intl/locale-data/en';
    import es from 'react-intl/locale-data/es';
    import fr from 'react-intl/locale-data/fr';
    
    addLocaleData(en);
    addLocaleData(es);
    addLocaleData(fr);
    

    Now when this file is bundled, it will include React Intl with en, es, and fr locale data.

    Note: The dist/locale-data/ has UMD files which expose the data at: ReactIntlLocaleData.<lang>. Previously the locale data files would automatically call addLocaleData() on the ReactIntl global. This decouples the loading of the locale data files from the loading of the library and allows them to be loaded async.

    <script async src="/path/to/react-intl/dist/react-intl.min.js"></script>
    <script async src="/path/to/react-intl/dist/locale-data/fr.js"></script>
    <script>
        window.addEventListener('load', function () {
            ReactIntl.addLocaleData(ReactIntlLocaleData.fr);
        });
    </script>
    

    Todos

    This is just a preview release so there's still more work to do until the v2 final release, but we've already begun integrating this code into Yahoo apps that use React Intl.

    • [x] Finish unit tests
    • [x] Add perf tests to determine if shouldComponentUpdate() is needed
    • [x] Create 1.0 -> 2.0 Upgrade Guide
    • [x] Update docs and examples on http://formatjs.io/ website
    • [x] Only support only React 0.14+? Yes
    • [x] Improve build, try to get source maps working on .min.js files
    • [x] Remove all TODO comments in code

    Testing and Feedback

    We'd love for you to try out this early version of React Intl v2 and give us feedback, it'll be much appreciated!

    $ npm install react-intl@next
    
    discussion 
    opened by ericf 193
  • Feature: New context API

    Feature: New context API

    This PR aims at using the new context API introduced with react 16.3.1. It's 100% API compatible and tested.

    Todo

    • [x] Fix rollup build process
    • [x] Rebase to get latest changes from yahoo/react-intl master [again]
    • [x] Release 3.0.0-beta-1
    • [ ] Get feedback
    opened by marcesengel 78
  • RFC: New React Context API

    RFC: New React Context API

    This is RFC

    There is upcoming change in React 16.3: New Version of Context

    Is there any plan for new (probably major / may be minor) release of react-intl supporting this new API?

    • I believe that some issues can disappear with new API
    • old APIs will probably start throwing deprecation warnings with React 16.4
    • old APIs will probably be removed in React 17
    opened by langpavel 63
  • How to use imperative API in a non-component script

    How to use imperative API in a non-component script

    As I understand injectIntl provides the imperative API inside a React component class, but I couldn't find a way to use that API ouside a component, for example in a helper or a utility class. Is there any way to do so?

    wontfix discussion 
    opened by Danita 63
  • Support React Native easily

    Support React Native easily

    The only problem with usage in React Native is span inside components. React Native needs Text. We can fix it easily. Add textElement into intlConfigPropTypes.

    // In React Native
    <IntlProvider
      textElement={Text}
      // ...
    />
    

    Then all components can use textElement from the context if available.

    enhancement help wanted discussion 
    opened by steida 55
  • Examples with more than just english, and translation files

    Examples with more than just english, and translation files

    I was looking for an example that sets up i18n for anything other than english and shows how to create and setup translation files, but it looks like every example in the repo only sets up english and there are no translation files of any kind.

    Am I missing something ?

    docs 
    opened by kosz 45
  • v3.0.0 Release Tracker

    v3.0.0 Release Tracker

    @DragonRaider5

    Creating this issue to track the remaining PR's/Issues for the v3.0.0 release. I've created a new milestone to make it easy to see the PR's that are open.

    Can you help fill in the v3.0.0 Migration guide? It would be good to follow the format from the v2 section.

    opened by redonkulus 42
  • Using react-intl with es6 classes

    Using react-intl with es6 classes

    Are you guys planning on providing a solution for this, like a higher order component for example? Or would you propose a different way of using react-intl without mixins?

    How about putting the translation methods into context, together with the already present props? Then a higher order component could just prepare the context and render a given child. But instead of then having to mix in the react-intl mixin, we could just define the proper contextTypes and have access to all the functionality we need.

    discussion fixed-by-v2 
    opened by johanneslumpe 42
  • React-native components as message values not working

    React-native components as message values not working

    Expected behavior

    Having a message Hello{what}!, I'd expect to be able to use a react-native component in place of what, i.e. passing { what: myComponent } as values to formatMessage or FormattedMessage should be supported.

    Current behavior

    React-native components as message values are not working:

    • with formatMessage() react-native components become [object Object] in the output string
    • with <FormattedMessage> /> the output message is interrupted at the first occurrence of a react-native component

    Step to reproduce

    1. Define the following message:
    const messages = {
      "DynamicHello": "Hello{what}!"
    }
    
    1. Define a react-native component to pass as what value:
    const whatText = <Text>, world</Text>;
    
    1. Try formatMessage:
    intl.formatMessage({ id: "DynamicHello" }, { what: whatText });
    // Output will be: `Hello[object Object]!`
    
    1. Try <FormattedMessage />
    render() {
      return <FormattedMessage id="DynamicHello" values={{ what: whatText }} />;
    }
    // Output will be: `Hello`
    

    Environment

    | Executable | Version | | ------------------: | :------ | | intl | 1.2.5 | | react-intl | 2.9.0 | | react-native-cli | 2.0.1 | | react-native | 0.59.10 | | yarn --version | 1.16.0 | | node --version | v10.15.1 |

    | OS | Version | | ---- | ------- | | macOS Mojave | 10.14.6 |

    | Device OS | Version | | ------- | ------- | | Android | all | | iOS | all |

    opened by 39otrebla 40
  • #1224 - Add useIntl hook

    #1224 - Add useIntl hook

    Disclaimer: I did not sign Yahoo!'s CLA's since this project is no longer supported by Yahoo!.

    Follow up our discussions in #1224; it would be nice to have useIntl as a shortcut to consume intl object directly in a function component. This PR provide this feature.

    Usage

    import { useIntl } from 'react-intl';
    

    Tests Coverage

    --------------------------|----------|----------|----------|----------|-------------------|
    File                      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
    --------------------------|----------|----------|----------|----------|-------------------|
    All files                 |    97.73 |    92.34 |      100 |    97.71 |                   |
     src                      |    98.09 |    91.13 |      100 |    98.06 |                   |
      define-messages.js      |      100 |      100 |      100 |      100 |                   |
      format.js               |    97.85 |    91.46 |      100 |    97.85 |           171,174 |
      index.js                |      100 |      100 |      100 |      100 |                   |
      locale-data-registry.js |      100 |    93.33 |      100 |      100 |                14 |
      plural.js               |      100 |      100 |      100 |      100 |                   |
      react-intl.js           |      100 |      100 |      100 |      100 |                   |
      types.js                |      100 |      100 |      100 |      100 |                   |
      utils.js                |    96.55 |    88.46 |      100 |    96.43 |                66 |
     src/components           |    97.45 |    93.88 |      100 |    97.44 |                   |
      date.js                 |      100 |      100 |      100 |      100 |                   |
      html-message.js         |      100 |      100 |      100 |      100 |                   |
      message.js              |      100 |     96.3 |      100 |      100 |                21 |
      number.js               |      100 |      100 |      100 |      100 |                   |
      plural.js               |      100 |      100 |      100 |      100 |                   |
      provider.js             |      100 |      100 |      100 |      100 |                   |
      relative.js             |    90.57 |    83.33 |      100 |    90.57 |    33,34,39,49,51 |
      time.js                 |      100 |      100 |      100 |      100 |                   |
      useIntl.js              |      100 |      100 |      100 |      100 |                   |
      withIntl.js             |      100 |      100 |      100 |      100 |                   |
    --------------------------|----------|----------|----------|----------|-------------------|
    
    =============================== Coverage summary ===============================
    Statements   : 97.73% ( 345/353 )
    Branches     : 92.34% ( 205/222 )
    Functions    : 100% ( 79/79 )
    Lines        : 97.71% ( 342/350 )
    ================================================================================
    Test Suites: 18 passed, 18 total
    Tests:       275 passed, 275 total
    Snapshots:   0 total
    Time:        15.26s
    
    
    opened by leoyli 39
  • Feature: Shorthand

    Feature: Shorthand

    Any opposition to supporting a shorthand syntax like other i18n libraries?

    Now that v2 is out and ids are no longer hierarchical, it would be great to allow people to use message contents as ids for short, simple, common mesages.

    Syntax

    __(message: string)

    Output

    <FormattedMessage id={message} defaultMessage={message}>
    

    Use Case

    It would be great to be able to allow things like:

    import {__} from 'react-intl';
    
    // ...
    render() {
      return (
        <div>{__("Confirm This Order")}</div>
      )
    }
    

    Rather than the much more verbose:

    render() {
      return (
        <div>
          <FormattedMessage id="common.confirmThisOrder"
            description="Order Confirmation"
            defaultMessage="Confirm This Order" />
        </div>
      )
    }
    

    I fully understand the value of descriptions, but there are times in many apps when it is very obvious what the context is.

    gettext et al have used this for a long time. It's not perfect by any means but it has its place.

    Babel Plugin

    I've integrated this in the babel plugin in the following commit: babel-plugin-react-intl#6569101d

    JSON Output

    I'm open to comments on what the description should be. We should provide some context while we can. I'm thinking the file path and perhaps the containing class name, if we can get it. For now, I've just attached the file name.

    [
      {
        "id": "Hello World!",
        "description": "Shorthand Message in File: test/fixtures/shorthand/actual.js",
        "defaultMessage": "Hello World!"
      },
      {
        "id": "Another message",
        "description": "Shorthand Message in File: test/fixtures/shorthand/actual.js",
        "defaultMessage": "Another message"
      }
    ]
    
    enhancement discussion 
    opened by STRML 38
  • fix(@formatjs/intl): update IntlFormatters.formatNumber value type

    fix(@formatjs/intl): update IntlFormatters.formatNumber value type

    I opened #3949 because I noticed a TS error was being thrown when passing a string type value to formatNumber, which I don't believe should be raised since Intl.FormatNumber.prototype.format does support string values as indicated here

    Please let me know if there's anything I've missed! Apologies if I've jumped the gun on creating a PR prior to having my issue triaged 🙏🏻

    opened by shermanhui 0
  • Typescript error when a string value is passed to formatNumber

    Typescript error when a string value is passed to formatNumber

    Which package?

    intl (react-intl) and potentially intl-numberformat

    Describe the bug

    Typescript throws a type error when a string value is passed to formatNumber

    To Reproduce

    Pass a string value to these formatters in a Typescript project

    intl.formatNumberToParts("199.9213154");
    intl.formatNumber("199.9213154");
    

    Codesandbox URL

    https://codesandbox.io/s/nervous-joji-b8i01h?file=/src/App.tsx

    Reproducible Steps/Repo

    N/A

    Expected behavior

    Should not throw a TS error as Intl.NumberFormat docs indicate that string values are supported.

    Screenshots

    If applicable, add screenshots to help explain your problem. Screen Shot 2022-12-29 at 11 20 16

    Desktop (please complete the following information):

    • OS: macOS
    • Browser: Chrome, Safari
    • Version: latest

    Smartphone (please complete the following information):

    N/A

    Additional context

    Intl.NumberFormat docs indicate that string values should be supported here

    Tests within intl package also indicate that string values are supported here

    It also looks like the numberformat tests in the v8 mirror on Github also have tests that indicate support for string type values here

    bug 
    opened by shermanhui 0
  • Update documentation

    Update documentation

    Hi,

    I've created #3926 which contains information how to use BabelEdit with FormatJS. That one was closed without getting merged into the documentation.

    The documentation mentions a lot of translation services. I would really like to get the PR merged because BabelEdit is a tool that fully supports FormatJS without the need of uploading data to cloud servers. All translation files can be edited directly on your computer which makes development of Apps much simpler.

    Best Andreas

    bug 
    opened by CodeAndWeb 0
  • Namespace 'Intl' has no exported member 'Locale'.   locale?: Intl.Locale;

    Namespace 'Intl' has no exported member 'Locale'. locale?: Intl.Locale;

    MicrosoftTeams-image (3) Also made changes in the tsconfig file as seen form other issues

    "lib": [

      "es2018",
    
      "es2020",
    
      "es2018.intl",
    
      "ES2020.Intl",
    
      "es2021",
    
      "esnext.intl",
    
      "dom",
    
      "dom.iterable",
    
    ]
    

    typescript :"4.3.2"

    bug 
    opened by Sanidhya22 0
  • chore(deps): update dependency typescript to v4.9.4

    chore(deps): update dependency typescript to v4.9.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | typescript (source) | 4.9.3 -> 4.9.4 | age | adoption | passing | confidence |


    Release Notes

    Microsoft/TypeScript

    v4.9.4: TypeScript 4.9.4

    Compare Source

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    Changes:

    This list of changes was auto generated.


    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
Owner
FormatJS
Internationalize your web apps on the client & server.
FormatJS
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Monorepo for all the tooling related to using ESLint with Angular

Angular ESLint Monorepo for all the tooling which enables ESLint to lint Angular projects

angular-eslint 1.4k Dec 29, 2022
A phone input component that uses intl-tel-input for Laravel Filament

Filament Phone Input This package provides a phone input component for Laravel Filament. It uses International Telephone Input to provide a dropdown o

Yusuf Kaya 24 Nov 29, 2022
A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

Alvaro Junior 1 Jul 23, 2022
Monorepo for open source libraries used by nrkno-sanity

NRK.no Sanity libraries NRK.no Sanity libraries contains an assortment of plugins and libraries used by NRK.no to extend Sanity Studio and apps using

Norsk rikskringkasting (NRK) 10 Nov 30, 2022
JavaScript project for the Leader-board list app, using webpack and ES6 features, notably modules

Leaderboard JavaScript project for the Leader-board list app, using webpack and ES6 features, Built With HTML CSS Javascript webpack Getting started t

Banlon Jones 3 Feb 17, 2022
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules

LEADERBOARD In this activity I am setting up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. I wil

Tobin 11 Mar 16, 2022
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules.

Leaderboard ONJoseph Leaderboard project JavaScript leaderboard project using API. Description In this activity I will set up a JavaScript project for

Joseph O 3 May 12, 2022
JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard API using JavaScript async and await and add some styling.

Leaderboard Project JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard

bizimungu pascal 4 May 20, 2022
This monorepo stores all code and assets of all projects with which we develop regels.overheid.nl

Welcome Introduction In 2021 Utrecht started developing the Virtual Income Desk with Open Rules. An initiative with the aim for citizens to always and

Ministerie van Binnenlandse Zaken en Koninkrijksrelaties 5 Dec 8, 2022
Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read a random math-related quote. Build with React.js

Math Magicians Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations an

Kyrillos Hany 9 Mar 23, 2022
"Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read random math-related quotes. Its built using react

Math Magician "Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations a

Charles Gobina 5 Feb 23, 2022
It is a monorepo that includes all end-to-end resolutions. You can create a website, API and mobile application.

Discord Website http://localhost:3000 - vue http://localhost:5000 - vue-mobile http://localhost:4000/graphql - api Setup pnpm install docker-compose u

Mehmet 34 Dec 7, 2022
A personal home page for quick access to all your personal apps/sites

Fenrus Fenrus personal home page/dasbhoard. It allows you to have a custom home page/new tab page with quick access to your personal apps. For support

John Andrews 196 Dec 31, 2022
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

nwb nwb is a toolkit for: Quick Development with React, Inferno, Preact or vanilla JavaScript Developing: React Apps Preact Apps Inferno Apps Vanilla

Jonny Buchanan 5.5k Jan 3, 2023
Primary repository for all information related to Fast-Floward Bootcamp session 1

⏩ Fast Floward Welcome to Fast Floward! We are excited to have you here. This repository is where you will find all content, resources, and links for

Decentology 44 Dec 23, 2022
Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and also read random math-related quotes.

Math-Magicians Additional description about the project and its features. Built With HTML CSS JavaScript React Getting Started To get a local copy up

Donard Golaj 7 Dec 29, 2021
"Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations. Read a random math-related quote.

math-magicians A Single Page App (SPA) that allows users to Make simple calculations and read a random math-related quote. "Math magicians" is a websi

Temitope Ogunleye 3 Feb 21, 2022
Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations. Read a random math-related quote.

Math Magicians. Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations

Mithlesh kumar 5 Mar 29, 2022