Skip to content

Instantly share code, notes, and snippets.

@helloanil
helloanil / App.js
Created February 12, 2019 00:48
CRA-I18N App.js - finishing translations
import React, { useContext } from 'react';
import logo from './logo.svg';
import './App.css';
import { I18nContext } from './i18n';
import LanguageSelect from './components/LanguageSelect';
const App = () => {
const { translate } = useContext(I18nContext);
@helloanil
helloanil / index.js
Created February 12, 2019 00:26
CRA-I18N index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { I18nContextProvider } from "./i18n";
// Nothing fancy, just wrap the App
ReactDOM.render(
@helloanil
helloanil / App.js
Last active February 12, 2019 00:17
CRA-I18N App.js - adding selector
// some other imports
import LanguageSelect from "./components/LanguageSelect";
// some other code
// <img src={logo} className="App-logo" alt="logo" />
<LanguageSelect /> // Add LanguageSelect component here!
//<p>
@helloanil
helloanil / LanguageSelect.js
Last active February 12, 2019 00:07
CRA-I18N LanguageSelect
import React, { useContext } from "react";
import { I18nContext } from "../i18n";
const LanguageSelect = props => {
/* Another hook here: useContext will receive a Context
and return anything provided in the Provider */
const { langCode, dispatch } = useContext(I18nContext);
@helloanil
helloanil / index.js
Last active February 11, 2019 23:58
CRA-I18N i18n/index.js
import React, { useReducer } from "react";
import EN from "./en.json";
import TR from "./tr.json";
import ES from "./es.json";
// To make it easier to read from JSON files
const translations = {
en: EN,
tr: TR,
@helloanil
helloanil / en.json
Created February 11, 2019 23:13
CRA-I18N Translation Files
{
"edit_and_save": "Edit src/App.js and save to reload.",
"learn_react": "Learn React"
}