update README also add examples for React and Vue

README.md

@@ -1,9 +1,14 @@
-# The simplest universal i18n solution
+# The Simplest Universal i18n Solution
 
 [![npm version][npm-v-img]][npm-url]
 [![npm download][npm-dl-img]][npm-url]
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
+## $ Features
+* Support browsers and Node.js
+* No dependencies (source code < 0.5KB)
+* Does not rely on any framework (React / Vue / Angular / ...) or any bundler (Webpack / Parcel / Rollup / ...)
+* Extremely simple and flexible
 
 ## $ Installation
 ### ⊙ NPM
@@ -12,6 +17,40 @@
 ### ⊙ CDN
 `<script src="//unpkg.com/simplest-i18n"></script>`
 
+## $ Usage
+
+```js
+import i18n from 'simplest-i18n'
+
+const t = i18n({
+  locale: navigator.language.toLowerCase(), // e.g. here yields 'en-us'
+  locales: [
+    // it is recommended that set your mother tongue as the first locale (e.g. Simplified Chinese for me)
+    'zh-cn',
+    'en-us',
+    'ja'
+  ]
+})
+
+console.log(
+  t(
+    '你好',
+    'Hello',
+    'こんにちは'
+  )
+) // outputs 'Hello'
+```
+
+***
+
+There are code examples for React and Vue in [`examples/`](./examples/)  
+Check it out and run it with the following directives:
+
+```
+>_ git clone https://github.com/kenberkeley/simplest-i18n
+>_ npm i
+>_ npm run react (or npm run vue)
+```
 
 [npm-url]: https://www.npmjs.com/package/simplest-i18n
 [npm-v-img]: http://img.shields.io/npm/v/simplest-i18n.svg

examples/react/app.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './components/App'
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+)

examples/react/components/App.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import LangSelect from './LangSelect'
+import t from '../../t'
+
+class App extends Component {
+
+  componentDidMount () {
+    console.log(
+      t(
+        '欢迎来到中国',
+        'Welcome to the US',
+        'ようこそ日本へ'
+      )
+    )
+  }
+
+  render () {
+    return (
+      <div>
+        <LangSelect />
+
+        { t(
+          '你好，世界',
+          'Hello, world',
+          'こんにちは、世界'
+        ) }
+      </div>
+    )
+  }
+
+}
+
+export default App

examples/react/components/LangSelect.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import Cookie from 'js-cookie'
+import { locale, locales } from '../../t'
+
+class LangSelect extends Component {
+
+  constructor () {
+    super()
+    this.state = { locale }
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  handleChange (e) {
+    Cookie.set('locale', e.target.value)
+    location.reload()
+  }
+
+  render () {
+    return (
+      <select value={this.state.locale} onChange={this.handleChange}>
+        {
+          locales.map(lang => (
+            <option key={lang} value={lang}>{ lang }</option>
+          ))
+        }
+      </select>
+    )
+  }
+
+}
+
+export default LangSelect

examples/t.js

@@ -0,0 +1,11 @@
+import Cookie from 'js-cookie'
+import i18n from '../'
+
+export const locale = Cookie.get('locale') || 'en'
+export const locales = ['cn', 'en', 'ja']
+
+const t = i18n({
+  locale,
+  locales
+})
+export default t

examples/vue/app.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './components/App'
+import t from '../t'
+
+Vue.prototype.$t = t
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

examples/vue/components/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <lang-select />
+
+    {{ $t(
+      '你好，世界',
+      'Hello, world',
+      'こんにちは、世界'
+    ) }}
+  </div>
+</template>
+<script>
+import LangSelect from './LangSelect'
+
+export default {
+  components: { LangSelect },
+  mounted () {
+    console.log(
+      this.$t(
+        '欢迎来到中国',
+        'Welcome to the US',
+        'ようこそ日本へ'
+      )
+    )
+  }
+}
+</script>

examples/vue/components/LangSelect.vue

@@ -0,0 +1,24 @@
+<template>
+  <select v-model="locale">
+    <option v-for="lang in locales" :key="lang" :value="lang">
+      {{ lang }}
+    </option>
+  </select>
+</template>
+<script>
+import Cookie from 'js-cookie'
+import { locale, locales } from '../../t'
+
+export default {
+  data: () => ({
+    locale,
+    locales
+  }),
+  watch: {
+    locale (val) {
+      Cookie.set('locale', val)
+      location.reload()
+    }
+  }
+}
+</script>

package.json

@@ -1,15 +1,17 @@
 {
   "name": "simplest-i18n",
-  "description": "The simplest universal i18n solution",
+  "description": "The Simplest Universal i18n Solution",
   "author": "Ken Berkeley <[email protected]>",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "i18n.min.js",
   "scripts": {
     "lint": "standard i18n.js",
     "prebuild": "npm run lint",
     "build": "uglifyjs i18n.js -c -m -o i18n.min.js",
     "pretest": "npm run lint",
-    "test": "ava test.js"
+    "test": "ava test.js",
+    "vue": "poi examples/vue/app.js",
+    "react": "poi --jsx react examples/react/app.js"
   },
   "repository": {
     "type": "git",
@@ -30,6 +32,10 @@
   ],
   "devDependencies": {
     "ava": "^0.24.0",
+    "js-cookie": "^2.2.0",
+    "poi": "^9.6.12",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "standard": "^10.0.3",
     "uglify-js": "^3.3.5"
   },

test.js

@@ -1,5 +1,5 @@
 import test from 'ava'
-import i18n from './i18n'
+import i18n from './'
 
 // name as `$t`, avoid conflicting with `t` of ava
 const $t = i18n({