import L20n, { L20nElement } from 'react-l20n-u';

// Load an ftl file with localization string
L20n.load('en', require('./locales/en-US.ftl'))
// Or load localization string inline
L20n.load('fr', `
product-name	= React L20n
messages		= {$count} messages
login-input		= Default value
	[html/placeholder]		[email protected]
	[html/aria-label]		Login input value
	[html/title]			Type your login email
`)

// Use L20n.get to retrieve localized strings by key
<div>
	<h1>Product name: { L20n.get('product-name') }</h1>
	<h2>Message count: { L20n.get('messages', { count: 2 }) }</h2>
</div>

// Or use the L20nElement React component to render HTML elements
<div>
	<L20nElement id="login-input" renderAs="input" />
</div>

// To load (require) ftl files with webpack use [raw-loader](https://github.com/webpack/raw-loader)
loaders: [
	{
		test: /\.ftl?$/,
		loader: 'raw-loader',
		exclude: /node_modules/
	}
]

// To load (require) ftl files in node add the ftl extension
require.extensions['.ftl'] = function(module, filename) {
	var content = fs.readFileSync(filename, 'utf8');
	module.exports = content;
};