@tiny-i18n/react-live

The magical effect making tiny-i18n could be used easily and edit live in react.

A demo and video created by react and using edit-live.

Usage

npm install @tiny-i18n/react-live tiny-i18n

• entry.js (the frontend's start point)

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import '@tiny-i18n/react-live/lib/style.css'
import { withTinyI18n, I18nProvider } from '@rcp/use.i18ncontext'

import { createReactI18nLive } from '@tiny-i18n/react-live'

import { createIsolateI18n } from 'tiny-i18n'

const { tinyI18n, transaction, createElement, configure } = createReactI18nLive({tinyI18n: createIsolateI18n()})

configure({
  enabled: true
})

const { setDictionary, getLanguages, getCurrentLanguage, i18n, getDictionary } = tinyI18n

let zhDict = require('./dict/zh-CN')
let enDict = require('./dict/en-US')

transaction.setConfig({
  fetchWord(data) {
    return fetch(`/i18n/word` , {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(data)
    })
      .then(res => res.json())
      .then(json => {
        return json.data
      })
    // word
  },
  fetchUpdate({ lang, key, value }) {
    return fetch('/i18n/update', {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify({ lang, key, value })
    })
      .then(res => res.json())
      .then(json => {
        console.log(json)
      })
  }
})
transaction.on('error', e => {
  console.error('error', e)
})

setDictionary(zhDict, 'zh-CN')

setDictionary(enDict, 'en-US')

@withTinyI18n
class View extends React.Component {
  changeLanguage = lang => {
    this.props.tinyI18n.setLanguage(lang)
  }
  componentWillMount() {
    this.changeLanguage(getLanguages()[0])
  }

  render() {
    return (
      <div>
        <h3>Current Language: {getCurrentLanguage()}</h3>
        {getLanguages().map(lang => (
          <button key={lang} onClick={this.changeLanguage.bind(this, lang)}>
            Change Language to {lang}
          </button>
        ))}
        <div>Im not an i18n text.</div>
        <div>{i18n('hi') + ',' + i18n('cong')}</div>
        <div title={'abc' + i18n('hi') + i18n('cong')}>
          {i18n('hi')},{i18n('cong', i18n('cong', 'hjhjhj'))}
        </div>
        <div title={i18n('say.hi', 'hah')}>{i18n('say.hi', i18n('cong'))}</div>

        <div title={i18n('hi') + ',' + i18n('tpl.name', i18n('cong'))}>
          {'Hover me! [translated words in title attribute] (The nested and concat case)'}
        </div>
        {/*TODO BUG*/
        /*<div title={i18n('hi') + ',' + i18n('say.hi', i18n('tpl.name', i18n('cong')))}>{'Change my title attribute (The nested and concat case)'}</div>*/}
      </div>
    )
  }
}

ReactDOM.render(
  <I18nProvider tinyI18n={tinyI18n}>
    <View />
  </I18nProvider>,
  window.root
)

Examples

# The Demo in `examples/` which could edit i18n word in live.
npm run example