├── .gitignore
├── demo
├── index.html
└── index.js
├── webpack.config.js
├── devServer.js
├── .eslintrc
├── dist
└── ReactLanguage.js
├── package.json
├── README.md
└── src
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | lib-cov
2 | coverage.html
3 | /coverage
4 | .DS_Store
5 | node_modules
6 | publish
7 | *.sock
8 | *.swp
9 | *.bat
10 | *.sh
11 | *.log
12 | .idea
13 | /components
14 | typings
15 | jsconfig.json
16 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
10 |
11 |
12 |
13 | loading...
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | entry: {
6 | 'ReactLanguage': "./src/index.js"
7 | },
8 | output: {
9 | path: path.join(__dirname, 'dist'),
10 | library: 'ReactLanguage',
11 | libraryTarget: 'umd',
12 | filename: '[name].js'
13 | },
14 | externals: {'react': 'React', 'react-dom': 'ReactDOM'},
15 | plugins: [
16 | new webpack.optimize.OccurenceOrderPlugin(),
17 | new webpack.optimize.UglifyJsPlugin({
18 | compressor: {
19 | warnings: false
20 | }
21 | })
22 | ],
23 | module: {
24 | loaders: [
25 | {
26 | test: /\.jsx?$/,
27 | loader: 'babel',
28 | query: {
29 | presets: ["react", "es2015"]
30 | }
31 | },
32 | ]
33 | }
34 | };
35 |
36 |
--------------------------------------------------------------------------------
/devServer.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var path = require('path');
4 | var express = require('express');
5 | var webpack = require('webpack');
6 |
7 | var config = require("./webpack.config.js");
8 |
9 | var app = express();
10 | var compiler = webpack(config);
11 |
12 | config.entry = {
13 | demo: [
14 | 'webpack-hot-middleware/client',
15 | './demo/index.js'
16 | ]
17 | };
18 | config.module.loaders.push({
19 | test: /\.jsx?$/,
20 | loader: 'babel',
21 | query: {
22 | presets: ["react", "es2015", "react-hmre"]
23 | }
24 | });
25 | config.plugins = [new webpack.HotModuleReplacementPlugin()];
26 | var compiler = webpack(config);
27 |
28 | app.use(require('webpack-dev-middleware')(compiler, {
29 | noInfo: true,
30 | publicPath: '/'
31 | }));
32 |
33 | app.use(require('webpack-hot-middleware')(compiler));
34 |
35 | app.get('/', function(req, res) {
36 | res.sendFile(path.join(__dirname, 'demo/index.html'));
37 | });
38 |
39 | app.listen(3000, 'localhost', function(err) {
40 | if (err) {
41 | console.log(err);
42 | return;
43 | }
44 |
45 | console.log('Listening at http://localhost:3000');
46 | });
47 |
48 |
49 |
--------------------------------------------------------------------------------
/demo/index.js:
--------------------------------------------------------------------------------
1 | import * as ReactLanguage from '../src';
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 |
5 | var Ja = ReactLanguage.create('ja');
6 | var Cn = ReactLanguage.create(function (lang) {
7 | return lang.toLowerCase().indexOf('zh-') === 0;
8 | });
9 | var En = ReactLanguage.create(true);
10 |
11 | var Demo = React.createClass({
12 | handleClick: function (lang) {
13 | ReactLanguage.setLanguage(lang);
14 | this.forceUpdate();
15 | },
16 |
17 | render: function () {
18 | return (
19 |
20 |
你好，世界
21 |
Hello world.
22 |
こんにちは世界
23 |
24 |
30 |
45 | 你好，世界
46 | Hello world.
47 | こんにちは世界
48 |
49 |
50 | ======================================================
51 | rendered result:
52 | currentLanguage === 'en-US' =>
53 | currentLanguage === 'zh-CN' => 你好，世界
54 | currentLanguage === 'ja' => こんにちは世界
55 | currentLanguage === 'other language' =>
56 | ```
57 |
58 | # props
59 | created component only has two props
60 | - children: content, anything
61 | - tag: ReactElement type string, like 'div', 'a', 'span'... if children is an Array or a string, render a new ReactElement wrapped by the tag. default value is 'span'.
62 |
63 | #license
64 |
65 | The MIT License (MIT)
66 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { PropTypes, isValidElement, Children, createElement, DOM } from 'react';
2 |
3 | const STORAGE_KEY = '17tee190yt8gs';
4 | const storage = window.localStorage || null;
5 |
6 | let currentLanguage;
7 | let createdLanguageList = [];
8 | let noMatchedLanguage = true;
9 |
10 | export function getLanguage () {
11 | if (!currentLanguage) {
12 | if (storage) {
13 | currentLanguage = storage.getItem(STORAGE_KEY);
14 | }
15 |
16 | if (!currentLanguage) {
17 | currentLanguage = (window.navigator.language || window.navigator.userLanguage || '').toLowerCase();
18 | }
19 |
20 | checkLanguageList()
21 | }
22 |
23 | return currentLanguage;
24 | }
25 |
26 | // If created Language List has Component match currentLanguage, set noMatchedLanguage to false.
27 | function checkLanguageList () {
28 | noMatchedLanguage = true;
29 | createdLanguageList.forEach((f) => {
30 | if (f(getLanguage())) {
31 | noMatchedLanguage = false;
32 | }
33 | });
34 | }
35 |
36 | // performance optimize
37 | function memoize(fn) {
38 | return function (lang) {
39 | fn.cache = fn.cache || {};
40 |
41 | return (lang in fn.cache) ?
42 | fn.cache[lang] :
43 | fn.cache[lang] = fn(lang);
44 | };
45 | }
46 |
47 | // set currentLanguage, store language to LocalStorage for next visit.
48 | export function setLanguage (lang) {
49 | currentLanguage = lang;
50 | checkLanguageList();
51 | if (storage) {
52 | storage.setItem(STORAGE_KEY, currentLanguage);
53 | }
54 | }
55 |
56 | export function create (lang) {
57 | let detect;
58 |
59 | // if lang === true, create default Language Component.
60 | if (lang === true) {
61 | // if currentLanguage has no other matched Language, show default Language.
62 | detect = () => noMatchedLanguage;
63 | } else {
64 | detect = memoize(typeof lang === 'function' ? lang : (l) => lang === l.toLowerCase());
65 | createdLanguageList.push(detect);
66 | checkLanguageList();
67 | }
68 |
69 | // Component ======================================
70 | function Language (props) {
71 | const { children, tag } = props;
72 |
73 | let isShow = detect(getLanguage());
74 | if (!isShow) {
75 | return DOM.noscript();
76 | }
77 |
78 | if (isValidElement(children)) {
79 | return Children.only(children);
80 | } else {
81 | return createElement(tag, {}, children);
82 | }
83 | }
84 |
85 | Language.propTypes = {
86 | children: PropTypes.any,
87 | tag: PropTypes.string
88 | };
89 |
90 | Language.defaultProps = {
91 | tag: 'span'
92 | };
93 |
94 | return Language;
95 | }
96 |
97 |
--------------------------------------------------------------------------------