Questions tagged [react-intl]

React Components for internationalization. Combines react components with FormatJS.

This library provides React Components and a Mixin to format data and strings, and internationalize your React app. Features

  • Formats numbers and dates/times, including those in complex messages.
  • Formats relative times (e.g., "3 hours ago").
  • Formats complex messages, including plural and select arguments using ICU Message syntax.
  • Supports custom formatters for numbers and dates/times.
332 questions
0
votes
1 answer

Can I style individual elements of a ?

I'm using FormattedDate to display the time, and I was wondering If I could style every individual part of the time. I managed to style the hour and minutes but what about the "AM" && "PM". My goal is to have something similar the attached image
AziCode
  • 2,072
  • 5
  • 23
  • 43
0
votes
1 answer

mocha with redux: expected undefined to equal true

I'm trying to wrote test for my react component which using redux and react-intl: import React from 'react'; import { expect } from 'chai'; import { shallow, mount, render } from 'enzyme'; import Navbar from 'Navbar'; import configureMockStore from…
Pavel
  • 1,773
  • 3
  • 18
  • 35
0
votes
1 answer

Call React Redux Toastr within a saga

I'm using React Boilerplate with React Redux Toastr and I want to be able to call a toastr using React Intl's messages. I've tried to call it within a componet, but as toastr is making state updates, Reacts warns me about that as an anti-pattern. I…
0
votes
1 answer

Is it possible to call react-intl api methods without inject each component

i'm wondering if there's any way to call API methods without inject each component ? somthing like providing a function that will call intl.formatMessage for example export function t(id,defaultmessage){ console.log("Called…
M1M6
  • 708
  • 3
  • 11
  • 30
0
votes
0 answers

React App refreshes on prop change

I am implementing Yahoo React-Intl to localize my application. In order to do this I must wrap the ROOT with the Localizer like so: const Root = React.createClass({ childContextTypes: { refresh: React.PropTypes.func }, getChildContext() { …
Geno Diaz
  • 351
  • 1
  • 6
  • 18
0
votes
1 answer

Webpack production build with routing not load 1.bundle.js file

I have a test repo for this problem (Link) I think it's a problem with localization file. I use react-intl. Dev version works good. The problem is: create production build run production server open app http://localhost:3001/activities refresh page…
Max P
  • 1,419
  • 2
  • 15
  • 30
0
votes
1 answer

How to load babel-plugin-react-intl using babel-loader?

I recently initialized a react app using create-react-app. I ejected the app and I now have all the files exported to my main directory. This set up creates a babel.dev.js instead of using .babelrc (it uses babel-loader). I am trying to figure out…
Stephani Alves
  • 793
  • 8
  • 14
0
votes
0 answers

How to Fetch Multi-language Locale Data of Same Key in react-intl?

I'd like to refer multi-language locale data of same keys in my React code. How to do that? For example, in another scheme like Ruby on Rails, we can fetch expected locale data as below: I18n.available_locales.map { |locale| I18n.t('hello', locale:…
bekkou68
  • 632
  • 1
  • 7
  • 18
0
votes
1 answer

Unable to Install React-Intl using NPM

I'm not able to install react-intl.It keeps throwing error ├── UNMET PEER DEPENDENCY react@0.13.3 └── react-intl@2.1.3 npm WARN react-dom@15.3.0 requires a peer of react@^15.3.0 but none was installed. npm WARN react-intl@2.1.3 requires a peer…
SureshCS
  • 925
  • 8
  • 20
0
votes
2 answers

Get a .js file dynamically rather than importing them

I have a small app that gives support to 30+ languages. I used react-intl to achieve my task. In react-intl I got to import every locale where every local file is around 7-8kbs, whereas I want to reduce these unnecessary imports and want to import…
iamsaksham
  • 2,301
  • 4
  • 21
  • 42
0
votes
1 answer

React-Router and React-Intl: Is there a better way to load dynamically the translation's route?

I would to load dynamically the page's translation when its route change. I done it using onEnter for each route. Is there a better way to implement this? Can I avoid to use onEnter callback function for each route? var Root = React.createClass({…
Webman
  • 1,308
  • 2
  • 21
  • 41
0
votes
1 answer

How to use react-intl v2 + webpack to load locale file?

I have a setup to use webpack to manage all my assets. it works fine. Now I plan to use react-intl version 2 to support multiple languages. I have managed to make components defined in package 'react-intl' work, import {IntlProvider,…
fuyi
  • 2,085
  • 3
  • 18
  • 38
0
votes
1 answer

How can I output long datetime format which includes timzone with moment-timezone and react-intl?

I have some client code which is using react-intl to display currency, language, and date time values in a the user's defined language and region (culture/locale). In addition to these requirements I want to show the timezone abbreviation when using…
jpierson
  • 13,736
  • 10
  • 94
  • 137
0
votes
1 answer

babel v6 + react-intl v2 + webpack extraction of messages to file

I would like to extract the messages from the source code to a JSON file, using Babel v6, react-intl v2, and webpack. It's all compiling fine, but not extracting anything. How do I make v2 of react-intl properly extract the messages? There's an…
Henrik
  • 9,303
  • 4
  • 49
  • 83
-1
votes
2 answers

Using IntlProvider with react-testing-library

For abstraction purpose, the app I work on has a custom provider that wraps a couple of other providers (like IntlProvider and CookiesProvider). The version of react-intl we use in our app is still v2 (react-intl@2.8.0). A simplified version of my…
1 2 3
22
23