The extension serves to effectively translate your application using inline translations so that you can view strings you are translating in context. If you right-click on the underlined string, the translation dialog appears and you will be able to vote for the available translations or submit a new one.
You can make translations available to your translators, users, or the entire community and make your product multilingual.
❇️ Translations can also be approved by your trusted translator(s).
- this library requires one of these FBT frameworks:
- Inline translating
- Glossary
- Voting
- Variations
- Dark mode
npm install fbt-inline-translations
# or
yarn add fbt-inline-translations
Errors in the terminal will give hints on how to add the required polyfill.
In your Webpack config:
module.exports = {
resolve: {
// ...
fallback: {
"buffer": require.resolve("buffer/"),
"url": require.resolve("url/"),
"path": require.resolve("path-browserify"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
},
alias: {
process: "process/browser",
},
plugins: [
// Work around for Buffer is undefined:
// https://github.com/webpack/changelog-v5/issues/10
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],
},
};
and
npm install buffer url path-browserify stream-http https-browserify --save-dev
# you may need to clear your cache after this change
rm -fr node_modules/.cache
Restart the Dev Server and the error will be gone.
Copy file fbt/InlineFbtResult.js to your project.
Register custom getFbtResult
hook:
import { init } from "fbt";
import FbtResult from "fbt/lib/FbtResult";
import InlineFbtResult from "./InlineFbtResult";
let inlineMode = 'NO_INLINE';
if (true) { // enable inline translations
inlineMode = 'TRANSLATION';
}
init({
hooks: {
// ...
getFbtResult: (input) => {
if (inlineMode && inlineMode !== 'NO_INLINE') {
return new InlineFbtResult(
input.contents,
inlineMode,
input.patternString,
input.patternHash,
);
}
return new FbtResult(input.contents, input.errorListener);
},
},
// ...
});
Register your FBT project on Swiftyper Translations.
Add this code to your page:
<div id="inline-translator"></div>
<script src="https://cdn.jsdelivr.net/npm/fbt-inline-translations/dist/bundle.js"></script>
<script>
swiftyperInlineTranslations.default({
token: 'YOUR_API_KEY_HERE',
locale: 'sk_SK', // translation locale
contributor: 'contributor@email.com', // contributor must be invited
darkMode: false, // dark mode also depends on html class 'tw-dark'
})
</script>
In your application, wrap your App
component. We recommend adding it around your root component in the index.js
file.
// src/index.js
import ReactDOM from 'react-dom';
import { FbtInlineTranslationsWrapper } from 'fbt-inline-translations';
ReactDOM.render(
<FbtInlineTranslationsWrapper
token={'YOUR_API_KEY_HERE'}
locale={"sk_SK"} // translation locale
contributor={"contributor@email.com"} // contributor must be invited
darkMode={false} // dark mode also depends on html class 'tw-dark'
>
<App />
</FbtInlineTranslationsWrapper>,
document.getElementById('root')
);