react-intl#IntlProvider JavaScript Examples

The following examples show how to use react-intl#IntlProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.jsx    From koronawirus.lol with GNU Affero General Public License v3.0 6 votes vote down vote up
fetch(messagesPath)
.then(response => response.json())
.then(response => {
  ReactDOM.render(
    <React.StrictMode>
      <IntlProvider messages={response} locale={language} defaultLocale={language}>
        <ReactBreakpoints breakpoints={breakpoints}>
          <App />
        </ReactBreakpoints>
      </IntlProvider>
    </React.StrictMode>,
    document.getElementById('root')
  );
})
Example #2
Source File: App.js    From viade_en1b with MIT License 6 votes vote down vote up
App = (props) => {
  const [theme, changeTheme] = useState(themes.purple);
  const { locale } = props;

  useEffect(() => {
    Object.keys(theme).map((key) => {
      const value = theme[key];
      return document.documentElement.style.setProperty(key, value);
    });
    return;
  });

  const navBar =
    useLoggedIn() === true ? (
      <MyNavBar data-testid="theNavBar" brandName="ViaDe_en1b"></MyNavBar>
    ) : null;

  return (
    <IntlProvider key={locale} locale={locale} messages={locales[props.locale]}>
      <ThemeContext.Provider value={{ theme, changeTheme }}>
        <div data-testid="theApp" className="App">
          <Routing navBar={navBar} />
          <Footer></Footer>
        </div>
      </ThemeContext.Provider>
    </IntlProvider>
  );
}
Example #3
Source File: index.js    From bluezone-app with GNU General Public License v3.0 6 votes vote down vote up
render() {
    const {language} = this.context;
    const _language = !language || language === 'vi' ? 'vi' : 'en';
    const {messages, children} = this.props;

    return (
      <IntlProvider
        locale={_language}
        key={_language}
        messages={messages[_language]}
        textComponent={Text}>
        {React.Children.only(children)}
      </IntlProvider>
    );
  }
Example #4
Source File: index.js    From react-firebase-admin with MIT License 6 votes vote down vote up
LanguageWrapper = ({ children }) => {
  const dispatch = useDispatch();

  let { locale } = useSelector(
    (state) => ({
      locale: state.preferences.locale,
    }),
    shallowEqual
  );

  if (!locale) {
    locale = availableLocales.includes(browserLocale) ? browserLocale : 'en';
    dispatch(setUserLocale(locale));
  }

  return (
    <IntlProvider
      locale={locale}
      defaultLocale="en"
      messages={messages[locale]}
    >
      {children}
    </IntlProvider>
  );
}
Example #5
Source File: index.js    From IBM-db2-blockchain-insurance-application with Apache License 2.0 6 votes vote down vote up
render = Component => {
  ReactDOM.render(
    <IntlProvider locale={locale} messages={translations[locale]} defaultLocale='en'>
      <AppContainer>
        <Component />
      </AppContainer>
    </IntlProvider>,
    roolEl
  );
}
Example #6
Source File: index.test.js    From QiskitFlow with Apache License 2.0 6 votes vote down vote up
describe('<ExperimentRunsList />', () => {
  it('Expect to not log errors in console', () => {
    const spy = jest.spyOn(global.console, 'error');
    const dispatch = jest.fn();
    render(
      <IntlProvider locale={DEFAULT_LOCALE}>
        <ExperimentRunsList dispatch={dispatch} />
      </IntlProvider>,
    );
    expect(spy).not.toHaveBeenCalled();
  });

  it('Expect to have additional unit tests specified', () => {
    expect(true).toEqual(false);
  });

  /**
   * Unskip this test to use it
   *
   * @see {@link https://jestjs.io/docs/en/api#testskipname-fn}
   */
  it.skip('Should render and match the snapshot', () => {
    const {
      container: { firstChild },
    } = render(
      <IntlProvider locale={DEFAULT_LOCALE}>
        <ExperimentRunsList />
      </IntlProvider>,
    );
    expect(firstChild).toMatchSnapshot();
  });
});
Example #7
Source File: HospitalCard.test.js    From WebApp with MIT License 6 votes vote down vote up
describe('<HospitalCard />', () => {
  let hospitalCard
  beforeEach(() => {
    const store = mockStore({})
    hospitalCard = render(<Provider store={store}><IntlProvider locale='en' messages={messagesEn}><HospitalCard hospitalNeeds ={hospitalNeeds} key={hospitalNeeds.id}></HospitalCard></IntlProvider></Provider>)
  })

  it('Should not show Form Makers dialog', () => {
    expect(hospitalCard.queryByText('Submit')).toBeFalsy()
  })

  it('Should show Form Makers dialog', () => {
    fireEvent.click(hospitalCard.getByText('Contact'))
    expect(hospitalCard.getByText('Submit')).toBeTruthy()
  })
})
Example #8
Source File: contentBrowser.js    From Edlib with GNU General Public License v3.0 6 votes vote down vote up
function initImageBrowser(element, settings) {
    const {
        onSelectCallback,
        locale,
        onToggleCallback,
    } = settings;

    const i18nData = (locale !== null ? addLanguage(locale) : i18nDefault);

    ReactDOM.render(
        <IntlProvider {...i18nData}>
            <ImageBrowserContainer
                onSelect={onSelectCallback}
                locale={locale}
                onToggle={onToggleCallback}
            />
        </IntlProvider>,
        element
    );
}
Example #9
Source File: index.js    From Nemesis with GNU General Public License v3.0 6 votes vote down vote up
ReactDOM.render(
  <IntlProvider
    locale={activeLocale}
    defaultLocale="en"
    messages={activeMessages}
  >
    <App
      style={{ flex: "1", display: "flex", positon: "relative", width: "100%" }}
    />
  </IntlProvider>,
  document.getElementById("root")
);
Example #10
Source File: index.test.js    From awsboilerplate with MIT License 6 votes vote down vote up
describe('<Footer />', () => {
  let store;

  beforeAll(() => {
    store = configureStore({}, browserHistory);
  });

  it('should render and match the snapshot', () => {
    const renderedComponent = renderer
      .create(
        <Provider store={store}>
          <IntlProvider locale="en">
            <Footer />
          </IntlProvider>
        </Provider>,
      )
      .toJSON();

    expect(renderedComponent).toMatchSnapshot();
  });
});
Example #11
Source File: localization.js    From gobench with Apache License 2.0 6 votes vote down vote up
Localization = ({ children, settings: { locale } }) => {
  const currentLocale = locales[locale]
  return (
    <ConfigProvider locale={currentLocale.localeAntd}>
      <IntlProvider locale={currentLocale.locale} messages={currentLocale.messages}>
        {children}
      </IntlProvider>
    </ConfigProvider>
  )
}
Example #12
Source File: index.test.js    From hackchat-client with Do What The F*ck You Want To Public License 6 votes vote down vote up
describe('<ChannelItem />', () => {
  let store;

  beforeAll(() => {
    store = configureStore({}, browserHistory);
  });

  it('should render a <button> tag', () => {
    const { container } = render(
      <Router>
        <Provider store={store}>
          <IntlProvider locale={DEFAULT_LOCALE}>
            <ChannelItem />
          </IntlProvider>
        </Provider>
      </Router>,
    );
    expect(container.querySelector('button')).not.toBeNull();
  });

  it('should have a class attribute', () => {
    const { container } = render(
      <Router>
        <Provider store={store}>
          <IntlProvider locale={DEFAULT_LOCALE}>
            <ChannelItem />
          </IntlProvider>
        </Provider>
      </Router>,
    );
    expect(container.querySelector('button').hasAttribute('class')).toBe(true);
  });
});
Example #13
Source File: app.js    From multistream with MIT License 6 votes vote down vote up
App = () => {
	return (
		<Provider store={store}>
			<IntlProvider locale="pt">
				<Prevent />
				<div className="container">
					<ConfigContainer />
					<StatusContainer />
				</div>
			</IntlProvider>
		</Provider>
	)
}
Example #14
Source File: index.js    From ice-electron with MIT License 6 votes vote down vote up
LocaleProvider = (props) => {
  const { children, locale, setLocale } = props;

  const myLocale = localeInfos[locale]
    ? localeInfos[locale]
    : localeInfos[LOCAL_ZH_CN];

  return (
    <LocalContext.Provider value={{ locale, setLocale }}>
      <IntlProvider locale={myLocale.appLocale} messages={myLocale.appMessages}>
        <ConfigProvider locale={myLocale.nextLocale}>
          {React.Children.only(children)}
        </ConfigProvider>
      </IntlProvider>
    </LocalContext.Provider>
  );
}
Example #15
Source File: intlEnzyme.js    From rainbow-modules with MIT License 6 votes vote down vote up
export function mountWithIntl(node) {
    return mount(node, {
        wrappingComponent: IntlProvider,
        wrappingComponentProps: {
            locale,
            defaultLocale,
        },
    });
}
Example #16
Source File: CommentsView.test.jsx    From frontend-app-discussions with GNU Affero General Public License v3.0 6 votes vote down vote up
function renderComponent(postId) {
  render(
    <IntlProvider locale="en">
      <AppProvider store={store}>
        <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
          <DiscussionContent />
          <Route
            path="*"
            render={({ location }) => {
              testLocation = location;
              return null;
            }}
          />
        </MemoryRouter>
      </AppProvider>
    </IntlProvider>,
  );
}
Example #17
Source File: IntlProvider.js    From covid19-testing with Apache License 2.0 6 votes vote down vote up
export function SpanishIntlProvider(props: Props) {
  // Not ideal that these side effect functions (polyfillIntl, addLocaleData)
  // are happening directly in the render, since render will be executed many
  // times. Hesitant to change that behavior right now without understanding
  // intl/react-intl more deeply.
  polyfillIntl(props.userLanguage);

  let intlMessages;
  if (props.userLanguage === 'es') {
    intlMessages = spanishMessages;
    addLocaleData(localDataEs);
  }

  const locale = LanguageToLocale[props.userLanguage];
  return (
    <IntlProvider defaultLocale="en-US" locale={locale} messages={intlMessages}>
      <IntlProviderNewContextAdapter>{props.children}</IntlProviderNewContextAdapter>
    </IntlProvider>
  );
}
Example #18
Source File: index.test.js    From bank-client with MIT License 6 votes vote down vote up
describe('<BankCards />', () => {
  it('should render a BankCards', () => {
    const { container } = render(
      <IntlProvider locale={DEFAULT_LOCALE}>
        <BankCards />
      </IntlProvider>,
    );
    expect(container.firstChild).toMatchSnapshot();
  });
});