Examples for passing MDText via Context

alexdrel · Mar 31, 2018 · 9c40958 · 9c40958
1 parent 410664f
commit 9c40958
Show file tree

Hide file tree

Showing 17 changed files with 206 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -8,15 +8,16 @@ Markdown-ish syntax with variables support (including of react element type).
 ### Quick example
 
 ```js
+var ReactDOM = require('react-dom');
 var React = require('react');
-var T = require('i18n-react');
+const { MDText } = require('i18n-react');
 
-T.setTexts({
-  greeting: "### Hello, World!\n My name is **{myName}**! \n {{howAreYou}}",
+const T = new MDText({
+  greeting: "#Hello, World!\n My name is **{myName}**! \n {{howAreYou}}",
   howAreYou:  "_How do you do?_"
-});
+}, { MDFlavor: 1 });
 
-React.render(
+ReactDOM.render(
   <T.span text={{ key: "greeting", myName: "i18n-react" }}/>,
   document.getElementById('content')
 );
@@ -62,6 +63,7 @@ Points of interest:
 Npm compatible packager (browserify/webpack) is recommended, but ```Dist``` folder also contains UMD versions
 (regular and minified) that can be used w/o commonJS packager.
 
+### Global Singleton
 ```js
 /* ES6 & TS */
 import T from 'i18n-react';
@@ -72,14 +74,15 @@ var T = window['i18n-react'].default;
 ```
 
 
-Initialize once - probably in an application entry point js:
+Setup once - probably in an application entry point js:
 ```js
 T.setTexts({
   greeting: "Hello, World! My name is *{myName}*! \n {{howAreYou}}",
   howAreYou:  "_How do you do?_"
 }, { MDFlavor: 0 });
 /* or if there is yaml/json loader */
-T.setTexts(require('../texts/texts-en.yml'));
+var dictionary = require('../texts/texts-en.yml');
+T.setTexts(dictionary);
 ```
 
 Use it anywhere:
@@ -100,6 +103,19 @@ let T = new MDText({...});
 let x = T.translate("path.to.string");
 <T.span text="path.to.string" />
 ```
+### Passing in the React Context
+MDText object can be passed in the react 16.3+ context. See examples/yaml for complete example.
+```tsx
+import { MDText } from 'i18n-react';
+let MDTextContext = React.createContext();
+let Texts = new MDText({...});
+
+<MDTextContext.Provider value={Texts}>
+    <MDTextContext.Consumer>{ (T) =>
+      <T.span text="path.to.string" />
+    }</MDTextContext.Consumer>
+</MDTextContext.Provider>
+```
 
 ### Difference between Keys and Context
 Text attribute is a key that should point to string or JSON object, it has to be present in the language resource.

diff --git a/examples/hello/index.html b/examples/hello/index.html
@@ -3,11 +3,13 @@
 <html>
   <head>
     <title>Hello I18N-React</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.development.js"></script>
  </head>
   <body>
-    <div id="content"></div>
+    <div id="content1"></div>
+    <div id="content2"></div>
+    <div id="content3"></div>
 		<script src="build/index.js"></script>
   </body>
 </html>
diff --git a/examples/hello/index.jsx b/examples/hello/index.jsx
@@ -1,15 +1,41 @@
 var ReactDOM = require('react-dom');
 var React = require('react');
-var T = require('i18n-react').default;
+const { default: T, MDText } = require('i18n-react');
 
-T.setTexts({
-  greeting: "#Hello, World!\n My name is *{myName}*! \n {{howAreYou}}",
+const dictionary = {
+  greeting: "###Hello, World!\n My name is **{myName}**! \n {{howAreYou}}",
   howAreYou:  "_How do you do?_"
-});
+};
 
+T.setTexts(dictionary, { MDFlavor: 1 })
 ReactDOM.render(
-  //<T.span text="greeting" myName="i18n-react"/>,
-  <T.span text={{ key: "greeting", myName: "i18n-react" }}/>,
-  document.getElementById('content')
+  <section>
+    <h2>Singelton</h2>
+    <T.text text={{ key: "greeting", myName: "i18n-react" }}/>
+  </section>,
+  document.getElementById('content1')
+);
+
+const Texts = new MDText(dictionary, { MDFlavor: 1 });
+ReactDOM.render(
+  <section>
+    <h2>MDText object</h2>
+    <Texts.text text={{ key: "greeting", myName: "i18n-react" }}/>
+  </section>,
+  document.getElementById('content2')
+);
+
+let MDTextContext = React.createContext();
+
+ReactDOM.render(
+  <section>
+    <h2>MDText in React Context</h2>
+    <MDTextContext.Provider value={Texts}>
+        <MDTextContext.Consumer>{ (TT) =>
+          <TT.text text={{ key: "greeting", myName: "i18n-react" }}/>
+        }</MDTextContext.Consumer>
+    </MDTextContext.Provider>
+  </section>,
+  document.getElementById('content3')
 );
 
diff --git a/examples/syntaxV1/index.tsx b/examples/syntaxV1/index.tsx
@@ -1,6 +1,6 @@
 import React = require('react');
 import ReactDOM = require('react-dom');
-import T from '../../dist/i18n-react';
+import { MDText } from '../../dist/i18n-react';
 
 
 const styles = {
@@ -19,7 +19,7 @@ const styles = {
   '': "``[*as*]_[is]_``",
 };
 
-T.setTexts({
+const T = new MDText({
   title: "Supported Markdown syntax *(V1 flavor)*",
   styles: styles,
 }, { MDFlavor: 1 });
@@ -32,7 +32,7 @@ ReactDOM.render(
         <li key={n}>
           <T.div text={"styles." + n} />
           <em>{'"' + (styles as any)[n].replace('\n', "\\n") + '"  '}</em>
-          {n && [<b key="b">{` <${n}>`}</b>, "tag "]}
+          {n && [<b key="b">{` <${n}>`}</b>, " tag"]}
         </li>
       )}
     </ul>

diff --git a/examples/yaml-ts/hello-block.tsx b/examples/yaml-ts/hello-block.tsx
@@ -0,0 +1,16 @@
+var React = require('react');
+import MDTextContext from './text-context';
+import { MDText } from '../../dist/i18n-react';
+export default function HelloBlock(props: { name: string, days: number, style: string }) {
+  return (
+    <MDTextContext.Consumer>{(T: MDText) =>
+      <div style={{ padding: "0 0 20px 30px", borderBottom: "solid 1px" }}>
+        <T.p text={{ key: "greetings.hello", who: props.name, context: props.style }} />
+        <T.p text={{ key: "greetings.howdy", who: props.name, context: props.style }} style={{ fontSize: "90%" }} />
+        <T.text tag='section' text="longTime" context={props.days} />
+        <T.text tag='article' text='lorem' style={{ padding: "10px 50px" }} />
+        <T.a text={{ key: "greetings.bye", who: props.name, context: props.style }} onClick={() => alert("Cya")} href="#" />
+      </div>
+    }</MDTextContext.Consumer>
+  );
+}
diff --git a/examples/yaml-ts/index.html b/examples/yaml-ts/index.html
@@ -0,0 +1,13 @@
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>I18N-React</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.development.js"></script>
+  </head>
+  <body>
+    <div id="content"></div>
+		<script src="build/index.js"></script>
+  </body>
+</html>
diff --git a/examples/yaml-ts/index.tsx b/examples/yaml-ts/index.tsx
@@ -0,0 +1,22 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+import { MDText } from '../../dist/i18n-react';
+import HelloBlock from './hello-block';
+import MDTextContext from './text-context';
+
+
+/* Initialize once - probably in entry point js somwehere near the router */
+var T = new MDText(require('./texts.yml'));
+
+ReactDOM.render(
+  <MDTextContext.Provider value={T}>
+    <section>
+      <HelloBlock name="World" style="formal" days={0} />
+      <HelloBlock name="State" style="normal" days={1} />
+      <HelloBlock name="City" style="informal" days={3} />
+      <HelloBlock name="Town" style="informal" days={5} />
+    </section>
+  </MDTextContext.Provider>,
+  document.getElementById('content')
+);
+
diff --git a/examples/yaml-ts/text-context.tsx b/examples/yaml-ts/text-context.tsx
@@ -0,0 +1,4 @@
+var React = require('react');
+import T from '../../dist/i18n-react';
+export default React.createContext(T);
+
diff --git a/examples/yaml-ts/texts.yml b/examples/yaml-ts/texts.yml
@@ -0,0 +1,22 @@
+greetings:
+  hello: Hi, {who}!
+  howdy:
+    formal: How do you do?
+    normal: How are you, {who}?
+    informal: "What's up?"
+  bye: Bye
+
+longTime:
+  0: Not a day no see
+  1: 1 day no see
+  '2..4': A few days no see
+  _: "[{context} days][Long time no see]"
+
+lorem: |
+  # Lorem
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  ## Quisque
+  Quisque sit amet nisi quis eros cursus finibus quis sed nisl.
+  ### Integer
+  Integer efficitur pharetra pretium.
+  Sed semper dui vitae nibh scelerisque sodales.
diff --git a/examples/yaml-ts/tsconfig.json b/examples/yaml-ts/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "jsx": "react",
+        "module": "commonjs",
+        "strict": true,
+        "strictNullChecks": false
+    }
+}
diff --git a/examples/yaml/hello-block.jsx b/examples/yaml/hello-block.jsx
@@ -1,18 +1,18 @@
 var React = require('react');
-var T = require('i18n-react').default;
+var MDTextContext = require('text-context');
 
-class HelloBlock extends React.Component {
-  render() {
-    return (
-    <div style={ { padding: "0 0 20px 30px", borderBottom: "solid 1px" } }>
-      <T.p text={{ key: "greetings.hello", who: this.props.name, context: this.props.style}} />
-      <T.p text={{ key: "greetings.howdy", who: this.props.name, context: this.props.style}} style={{ fontSize:"90%" }} />
-      <T.text tag='section' text="longTime" context={this.props.days} />
-      <T.text tag='article' text='lorem' style={ { padding: "10px 50px" }}/>
-      <T.a text={{ key: "greetings.bye", who: this.props.name, context: this.props.style}} onClick={ () => alert("Cya")} href="#"/>
-    </div>
-    );
-  }
+function HelloBlock(props) {
+  return (
+    <MDTextContext.Consumer>{ (T) =>
+      <div style={ { padding: "0 0 20px 30px", borderBottom: "solid 1px" } }>
+        <T.p text={{ key: "greetings.hello", who: props.name, context: props.style}} />
+        <T.p text={{ key: "greetings.howdy", who: props.name, context: props.style}} style={{ fontSize:"90%" }} />
+        <T.text tag='section' text="longTime" context={props.days} />
+        <T.text tag='article' text='lorem' style={ { padding: "10px 50px" }}/>
+        <T.a text={{ key: "greetings.bye", who: props.name, context: props.style}} onClick={ () => alert("Cya")} href="#"/>
+      </div>
+    }</MDTextContext.Consumer>
+  );
 }
 
 module.exports = HelloBlock
diff --git a/examples/yaml/index.html b/examples/yaml/index.html
@@ -3,8 +3,8 @@
 <html>
   <head>
     <title>I18N-React</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.development.js"></script>
   </head>
   <body>
     <div id="content"></div>

diff --git a/examples/yaml/index.jsx b/examples/yaml/index.jsx
@@ -1,18 +1,21 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
-var T = require('i18n-react').default;
+var MDText = require('i18n-react').MDText;
 var HelloBlock = require('./hello-block');
+var MDTextContext = require('text-context');
 
 /* Initialize once - probably in entry point js somwehere near the router */
-T.setTexts( require('./texts.yml'));
+var T = new MDText(require('./texts.yml'));
 
 ReactDOM.render(
-  <section>
-    <HelloBlock name="World" style="formal" days={0}/>
-    <HelloBlock name="State" style="normal" days={1}/>
-    <HelloBlock name="City" style="informal" days={3}/>
-    <HelloBlock name="Town" style="informal" days={5}/>
-  </section>,
+  <MDTextContext.Provider value={T}>
+    <section>
+      <HelloBlock name="World" style="formal" days={0}/>
+      <HelloBlock name="State" style="normal" days={1}/>
+      <HelloBlock name="City" style="informal" days={3}/>
+      <HelloBlock name="Town" style="informal" days={5}/>
+    </section>
+  </MDTextContext.Provider>,
   document.getElementById('content')
 );
 
diff --git a/examples/yaml/text-context.jsx b/examples/yaml/text-context.jsx
@@ -0,0 +1,6 @@
+var React = require('react');
+var T = require('i18n-react').default;
+
+var MDTextContext = React.createContext(T);
+
+module.exports = MDTextContext;