<!DOCTYPE html>
<html>
<head>
<script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.js"></script>
<script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.js"></script>
<script src="https://unpkg.com/languages-js@latest/languages.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="example"></div>
<script src="script.js"></script>
</body>
</html>
class Example extends React.Component {
constructor() {
super();
this.handleChange = this.handleChange.bind(this);
this.state = {lang: Languages.current};
}
handleChange(event){
let {value} = event.target;
Languages.set(value, () => {
this.setState({lang: value});
});
}
render() {
return (
<div>
<select onChange={this.handleChange} value={this.state.lang}>
<option value="en_EN">English</option>
<option value="fr_FR">French</option>
</select>
<h1>{'hello'.t()}</h1>
</div>
);
}
}
Languages.init(['en_EN', 'fr_FR'], './languages/', () => {
ReactDOM.render(
<Example />,
document.getElementById('example')
);
})
/* Styles go here */
[
{
"hello": "hello"
},
{}
]
[
{
"hello": "bonjour"
},
{}
]