[fixes #300] Add flat translation table usage example

Author: dapi

README.md

@@ -287,13 +287,24 @@ The first event in the above example will move the card `Buy Milk` from the plan
 Pass translation function to provide custom or localized texts:
 
 ```javascript
+
+// If your translation table is flat
+//
+// For example: { 'placeholder.title': 'some text' }
 const customTranslation = (key) => TRANSLATION_TABLE[key]
 
+// If your translation table has nested hashes (provided translations table is it)
+//
+// For example: { 'placeholder': { 'title': 'some text' } }
+import { createTranslate } from 'react-trello'
+const customTranslation = createTranslate(TRANSLATION_TABLE)
+
 <Board t={customTranslation} .../>
 ```
 
 List of available keys - [locales/en/translation.json](https://github.com/rcdexta/react-trello/blob/master/locales/en/translation.json)
 
+
 ### react-i18next example
 
 ```javascript

stories/I18n.story.js

@@ -8,25 +8,6 @@ import createTranslate from 'rt/helpers/createTranslate'
 
 const smallData = require('./data/data-sort')
 
-const TEXTS = {
-  "Add another lane": "NEW LANE",
-  "Click to add card": "Click to add card",
-  "Delete lane": "Delete lane",
-  "Lane actions": "Lane actions",
-  "button": {
-    "Add lane": "Add lane",
-    "Add card": "Add card",
-    "Cancel": "Cancel"
-  },
-  "placeholder": {
-    "title": "title",
-    "description": "description",
-    "label": "label"
-  }
-}
-
-const customTranslation = createTranslate(TEXTS)
-
 const I18nBoard = () => {
   const { t } = useTranslation()
   return (
@@ -41,12 +22,55 @@ const I18nBoard = () => {
 }
 
 storiesOf('I18n', module)
-  .addDecorator(story => <I18nextProvider i18n={i18n}>{story()}</I18nextProvider>)
   .add(
     'Custom texts',
-    () =>  <Board data={smallData} t={customTranslation} editable canAddLanes draggable /> ,
+    () =>  {
+
+      const TEXTS = {
+        "Add another lane": "NEW LANE",
+        "Click to add card": "Click to add card",
+        "Delete lane": "Delete lane",
+        "Lane actions": "Lane actions",
+        "button": {
+          "Add lane": "Add lane",
+          "Add card": "Add card",
+          "Cancel": "Cancel"
+        },
+        "placeholder": {
+          "title": "title",
+          "description": "description",
+          "label": "label"
+        }
+      }
+
+      const customTranslation = createTranslate(TEXTS)
+      return <Board data={smallData} t={customTranslation} editable canAddLanes draggable />
+    },
     {info: 'Have custom text titles'}
   )
+  .add(
+    'Flat translation table',
+    () =>  {
+      const FLAT_TRANSLATION_TABLE = {
+        "Add another lane": "+ Weitere Liste erstellen",
+        "Click to add card": "Klicken zum Erstellen einer Karte",
+        "Delete lane": "Liste löschen",
+        "Lane actions": "Listenaktionen",
+        "button.Add lane": "Liste hinzufügen",
+        "button.Add card": "Karte hinzufügen",
+        "button.Cancel": "Abbrechen",
+        "placeholder.title": "Titel",
+        "placeholder.description": "Beschreibung",
+        "placeholder.label": "Label"
+      };
+
+      return <Board data={smallData} t={key => FLAT_TRANSLATION_TABLE[key]} editable canAddLanes draggable />
+    },
+    {info: 'Flat translation table'}
+  )
+
+storiesOf('I18n', module)
+  .addDecorator(story => <I18nextProvider i18n={i18n}>{story()}</I18nextProvider>)
   .add(
     'Using i18next',
     () => <I18nBoard /> ,