Plain case
26 | Render
30 | Component
33 | Children (sub classing)
39 | Extending the dictionary
44 | こんにちは、世界！
16 | //さよなら、FRANCISCOさん！
17 | ``` 18 | 19 | Contents: 20 | 21 | - [**Getting started**](#getting-started): Introduction to how to start using `react-text` with React. 22 | - [**Dictionary**](#dictionary): define the translations and some basic transformations. 23 | - [**Configuration**](#configuration): set the language and inject the dictionary. 24 | - [**Translate**](#translate): use `
131 |
132 | {/* English for Dictionary B */}
133 |
134 |
135 | Hello world
160 | //Hey world!
161 | //Goodbye world
162 | ``` 163 | 164 | The language would normally be a variable that comes from your own code: 165 | 166 | ```js 167 | import Text from 'react-text'; 168 | import dictionary from './dictionary'; 169 | 170 | export default ({ language = 'en' }) => ( 171 |Hello world!
198 | //こんにちは、世界！
199 | //¡Hola mundo!
200 | ``` 201 | 202 | While nesting dictionaries is totally fine and expected, nesting languages might get messy and it's recommended to avoid it if possible. Use a global store like Redux to handle the language instead and inject it at the root level: 203 | 204 | ```js 205 | // LanguagePicker.js 206 | // Example implementation with Redux and an action creator 207 | const setLanguage = payload => ({ type: 'SET_LANGUAGE', payload }); 208 | export default connect(({ language }) => ({ language }))(({ language, dispatch }) => { 209 |Current language: {language}
214 |こんにちは、世界！
251 | ``` 252 | 253 | **Valid id names**: any prop except `id`, [`children`](#configuration), [`render`](#render) and [`component`](#component) since these have special meaning in React-Text. Click on those keywords to see how they are used. The ids are case-sensitive. 254 | 255 | The dictionary can also be a function, which will be called when rendering. The advantage is that it will receive any prop that you pass to the element. You can then localize the text properly depending on the language, and even provide defaults easily: 256 | 257 | ```js 258 | const dictionary = { 259 | greetings: { 260 | en: ({ name = 'World' }) => `Hello ${name}!`, 261 | es: ({ name = 'Mundo' }) => `¡Hola ${name}!`, 262 | ja: ({ name = '世界' }) => `こんにちは、${name.toUpperCase()}さん！` 263 | } 264 | }; 265 | 266 | // The prop passed as `name` will be received in the dictionary 267 | export default () => ( 268 |{text}
} /> 314 | // ~>Hello world
315 | ``` 316 | 317 | The next example can only be achieved with `render()` since it will pass the plain representation as specified in the dictionary: 318 | 319 | ```js 320 |
343 |
345 | {/* Large block of text in English here */}
346 |
347 | )} />
348 |
350 | {/* Large block of text in Spanish here */}
351 |
352 | )} />
353 |
355 | {/* Large block of text in Japanese here */}
356 |
357 | )} />
358 |
359 | ```
360 |
361 | Note that, when using `component={...}`, we are using **the language as a key**. This would be the internal equivalent of you doing:
362 |
363 | ```js
364 | // dictionary.js
365 | // NOTE: DO NOT DO THIS, this is just a visualization of how it works internally
366 | export default {
367 | en: { en: ({ component }) => component, es: '', ja: '' },
368 | es: { en: '', es: ({ component }) => component, ja: '' },
369 | ja: { en: '', es: '', ja: ({ component }) => component }
370 | };
371 | ```
372 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import babel from "rollup-plugin-babel";
2 | import { terser } from "rollup-plugin-terser";
3 |
4 | export default {
5 | input: "src/index.js",
6 | output: { file: "index.min.js", format: "esm" },
7 | external: ["react"],
8 | plugins: [
9 | babel({
10 | exclude: "node_modules/**",
11 | presets: [
12 | ["@babel/env", { targets: { node: 12 } }],
13 | "@babel/preset-react",
14 | ],
15 | }),
16 | terser(),
17 | ],
18 | };
19 |
--------------------------------------------------------------------------------
/src/find.js:
--------------------------------------------------------------------------------
1 |
2 | export default ({ id, dictionary, language, ...props }) => {
3 | if (!id) {
4 | const keys = Object.entries(props).filter(([k, v]) => typeof v === 'boolean').map(([k]) => k);
5 | if (!keys.length) throw new Error('Please make sure to pass an id');
6 | if (keys.length > 1) throw new Error(`Please only pass a single id/boolean, detected '${keys}'`);
7 | id = keys[0];
8 | }
9 | const ids = Object.keys(dictionary);
10 | if (!ids.includes(id)) {
11 | throw new Error(`Couldn't find '${id}' in the dictionary. Available ids: ${ids}`);
12 | }
13 | if (typeof dictionary[id][language] === 'undefined') {
14 | throw new Error(`The language '${language}' is not available (attempted with id '${id}')`);
15 | }
16 | return dictionary[id][language](props);
17 | };
18 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { createContext } from "react";
2 | import normal from "./normalize";
3 | import find from "./find";
4 | const { Provider, Consumer } = createContext({});
5 |
6 | let Text = ({ children }) => children;
7 | // Attempt to load React Native if it's a dependency so that it is wrapped there
8 | if (typeof require !== "undefined") {
9 | try {
10 | Text = require("react-native").Text;
11 | } catch (error) {}
12 | }
13 |
14 | export default ({
15 | language,
16 | dictionary = {},
17 | children,
18 | render,
19 | component,
20 | ...props
21 | }) => (
22 |
23 |
30 |
24 |
27 |
39 | Hello world
40 |
41 | ).text();
42 | expect(text).toBe("Hello world");
43 | });
44 |
45 | it("can render correctly with id", () => {
46 | const text = $(
47 |
49 |
60 |
71 |
83 |
95 |
107 |
119 |
131 |
143 |
155 |
168 |
171 | {text}
} /> 169 |{text}
} /> 170 |{text}
} /> 180 |{text}
} /> 189 |{text}
} /> 198 |
209 |
219 |
210 |
213 |
216 |
228 |
238 |
229 |
232 |
235 |