diff --git a/package.json b/package.json
index 7f5d40559..3b61fddec 100644
--- a/package.json
+++ b/package.json
@@ -32,11 +32,15 @@
"babel-polyfill": "^6.26.0",
"core-js": "^3.32.0",
"eventemitter2": "^6.4.5",
+ "i18next": "^23.5.1",
+ "i18next-browser-languagedetector": "^7.1.0",
"lodash": "^4.17.21",
- "prop-types": "^15.8.1"
+ "prop-types": "^15.8.1",
+ "react-i18next": "^13.2.2"
},
"devDependencies": {
"@babel/core": "^7.22.9",
+ "@types/react": "^18.2.25",
"ajv-pack": "^0.3.1",
"babel-cli": "^6.24.1",
"babel-core": "^6.26.3",
diff --git a/src/components/FormEdit.jsx b/src/components/FormEdit.jsx
index b52f3b4da..42815673c 100644
--- a/src/components/FormEdit.jsx
+++ b/src/components/FormEdit.jsx
@@ -4,6 +4,7 @@ import FormBuilder from './FormBuilder';
import _set from 'lodash/set';
import _cloneDeep from 'lodash/cloneDeep';
import _camelCase from 'lodash/camelCase';
+import {Trans, useTranslation} from 'react-i18next';
const reducer = (form, {type, value}) => {
const formCopy = _cloneDeep(form);
@@ -45,6 +46,33 @@ const FormEdit = (props) => {
ref,
} = props;
+ const {t, i18n} = useTranslation();
+ let language = undefined;
+ let i18nOption = undefined;
+ if (options) {
+ language = options.language;
+ i18nOption = options.i18n;
+ }
+ useEffect(() => {
+ if (i18nOption) {
+ for (const lang of Object.keys(i18nOption)) {
+ i18n.addResourceBundle(
+ lang,
+ 'translations',
+ i18nOption[lang],
+ true,
+ true
+ );
+ }
+ }
+ }, [i18nOption]);
+
+ useEffect(() => {
+ if (language) {
+ i18n.changeLanguage(language);
+ }
+ }, [language]);
+
const [form, dispatchFormAction] = useReducer(reducer, _cloneDeep(propsForm));
useEffect(() => {
const {form: newForm} = props;
@@ -73,11 +101,13 @@ const FormEdit = (props) => {
<div className="row" ref={ref}>
<div className="col-lg-2 col-md-4 col-sm-4">
<div id="form-group-title" className="form-group">
- <label htmlFor="title" className="control-label field-required">Title</label>
+ <label htmlFor="title" className="control-label field-required">
+ <Trans>Title</Trans>
+ </label>
<input
type="text"
className="form-control" id="title"
- placeholder="Enter the form title"
+ placeholder={t('Enter the form title')}
value={form.title || ''}
onChange={event => handleChange('title', event)}
/>
@@ -85,12 +115,14 @@ const FormEdit = (props) => {
</div>
<div className="col-lg-2 col-md-4 col-sm-4">
<div id="form-group-name" className="form-group">
- <label htmlFor="name" className="control-label field-required">Name</label>
+ <label htmlFor="name" className="control-label field-required">
+ <Trans>Name</Trans>
+ </label>
<input
type="text"
className="form-control"
id="name"
- placeholder="Enter the form machine name"
+ placeholder={t('Enter the form machine name')}
value={form.name || ''}
onChange={event => handleChange('name', event)}
/>
@@ -98,7 +130,9 @@ const FormEdit = (props) => {
</div>
<div className="col-lg-2 col-md-3 col-sm-3">
<div id="form-group-display" className="form-group">
- <label htmlFor="name" className="control-label">Display as</label>
+ <label htmlFor="name" className="control-label">
+ <Trans>Display as</Trans>
+ </label>
<div className="input-group">
<select
className="form-control"
@@ -107,16 +141,18 @@ const FormEdit = (props) => {
value={form.display || ''}
onChange={event => handleChange('display', event)}
>
- <option label="Form" value="form">Form</option>
- <option label="Wizard" value="wizard">Wizard</option>
- <option label="PDF" value="pdf">PDF</option>
+ <option label={t('Form')} value="form">Form</option>
+ <option label={t('Wizard')} value="wizard">Wizard</option>
+ <option label={t('PDF')} value="pdf">PDF</option>
</select>
</div>
</div>
</div>
<div className="col-lg-2 col-md-3 col-sm-3">
<div id="form-group-type" className="form-group">
- <label htmlFor="form-type" className="control-label">Type</label>
+ <label htmlFor="form-type" className="control-label">
+ <Trans>Type</Trans>
+ </label>
<div className="input-group">
<select
className="form-control"
@@ -125,21 +161,23 @@ const FormEdit = (props) => {
value={form.type}
onChange={event => handleChange('type', event)}
>
- <option label="Form" value="form">Form</option>
- <option label="Resource" value="resource">Resource</option>
+ <option label={t('Form')} value="form">Form</option>
+ <option label={t('Resource')} value="resource">Resource</option>
</select>
</div>
</div>
</div>
<div className="col-lg-2 col-md-4 col-sm-4">
<div id="form-group-path" className="form-group">
- <label htmlFor="path" className="control-label field-required">Path</label>
+ <label htmlFor="path" className="control-label field-required">
+ <Trans>Path</Trans>
+ </label>
<div className="input-group">
<input
type="text"
className="form-control"
id="path"
- placeholder="example"
+ placeholder={t('example')}
style={{'textTransform': 'lowercase', width:'120px'}}
value={form.path || ''}
onChange={event => handleChange('path', event)}
diff --git a/src/i18n.js b/src/i18n.js
new file mode 100644
index 000000000..df6e7f793
--- /dev/null
+++ b/src/i18n.js
@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import {initReactI18next} from 'react-i18next';
+import englishTranslation from './translations/en';
+
+i18n
+ .use(LanguageDetector)
+ .use(initReactI18next)
+ .init({
+ resources: {
+ en: {
+ translations: englishTranslation
+ },
+ },
+ fallbackLng: 'en',
+ ns: 'translations',
+ keySeparator: false, // recommended when working with flat objects
+ interpolation: {
+ escapeValue: false
+ }
+ });
+
+export default i18n;
diff --git a/src/index.js b/src/index.js
index 3f736e825..8a42d4e14 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
import {Formio} from 'formiojs';
+import './i18n';
const Webform = Formio.Webform;
const WebformBuilder = Formio.WebformBuilder;
const Wizard = Formio.Wizard;
diff --git a/src/translations/en.js b/src/translations/en.js
new file mode 100644
index 000000000..ebdab0809
--- /dev/null
+++ b/src/translations/en.js
@@ -0,0 +1,14 @@
+export default {
+ Title: 'Title',
+ Name: 'Name',
+ 'Display as': 'Display as',
+ Type: 'Type',
+ Form: 'Form',
+ Resource: 'Resource',
+ Path: 'Path',
+ 'Enter the form title': 'Enter the form title',
+ Wizard: 'Wizard',
+ PDF: 'PDF',
+ 'Enter the form machine name': 'Enter the form machine name',
+ 'example': 'example'
+};
diff --git a/yarn.lock b/yarn.lock
index e3ae87d3b..ab45cad29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -230,7 +230,7 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
-"@babel/runtime@^7.20.6", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.19.4", "@babel/runtime@^7.20.6", "@babel/runtime@^7.22.5", "@babel/runtime@^7.9.2":
version "7.23.1"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
@@ -513,6 +513,25 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.2.3.tgz#b31eb300610c3835ac008d690de6f87e28f9b878"
integrity sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw==
+"@types/prop-types@*":
+ version "15.7.8"
+ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3"
+ integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==
+
+"@types/react@^18.2.25":
+ version "18.2.25"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.25.tgz#99fa44154132979e870ff409dc5b6e67f06f0199"
+ integrity sha512-24xqse6+VByVLIr+xWaQ9muX1B4bXJKXBbjszbld/UEDslGLY53+ZucF44HCmLbMPejTzGG9XgR+3m2/Wqu1kw==
+ dependencies:
+ "@types/prop-types" "*"
+ "@types/scheduler" "*"
+ csstype "^3.0.2"
+
+"@types/scheduler@*":
+ version "0.16.4"
+ resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.4.tgz#fedc3e5b15c26dc18faae96bf1317487cb3658cf"
+ integrity sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==
+
"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
version "1.11.6"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
@@ -2297,6 +2316,11 @@ cssstyle@^3.0.0:
dependencies:
rrweb-cssom "^0.6.0"
+csstype@^3.0.2:
+ version "3.1.2"
+ resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+ integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
custom-event-polyfill@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
@@ -3826,6 +3850,13 @@ html-encoding-sniffer@^3.0.0:
dependencies:
whatwg-encoding "^2.0.0"
+html-parse-stringify@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+ integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+ dependencies:
+ void-elements "3.1.0"
+
htmlparser2@^8.0.1:
version "8.0.2"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
@@ -3873,6 +3904,13 @@ https-proxy-agent@^5.0.1:
agent-base "6"
debug "4"
+i18next-browser-languagedetector@^7.1.0:
+ version "7.1.0"
+ resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.1.0.tgz#01876fac51f86b78975e79b48ccb62e2313a2d7d"
+ integrity sha512-cr2k7u1XJJ4HTOjM9GyOMtbOA47RtUoWRAtt52z43r3AoMs2StYKyjS3URPhzHaf+mn10hY9dZWamga5WPQjhA==
+ dependencies:
+ "@babel/runtime" "^7.19.4"
+
i18next@22.4.12:
version "22.4.12"
resolved "https://registry.yarnpkg.com/i18next/-/i18next-22.4.12.tgz#fde322c186501ea1adcdfac41b2d2552b26eab42"
@@ -3880,6 +3918,13 @@ i18next@22.4.12:
dependencies:
"@babel/runtime" "^7.20.6"
+i18next@^23.5.1:
+ version "23.5.1"
+ resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.5.1.tgz#7f7c35ffaa907618d9489f106d5006b09fbca3d3"
+ integrity sha512-JelYzcaCoFDaa+Ysbfz2JsGAKkrHiMG6S61+HLBUEIPaF40WMwW9hCPymlQGrP+wWawKxKPuSuD71WZscCsWHg==
+ dependencies:
+ "@babel/runtime" "^7.22.5"
+
iconv-lite@0.4.24:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -5531,6 +5576,14 @@ react-dom@^18.1.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"
+react-i18next@^13.2.2:
+ version "13.2.2"
+ resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.2.2.tgz#b1e78ed66a54f4bc819616f68b98221e1b1a1936"
+ integrity sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ==
+ dependencies:
+ "@babel/runtime" "^7.22.5"
+ html-parse-stringify "^3.0.1"
+
"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -6670,6 +6723,11 @@ vary@^1:
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+void-elements@3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+ integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
void-elements@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"