This video is available to students only


Adding another bit of customization to the query builder -- a Spanish translation


Let's take our configuration to the next level. First, we'll add a Spanish translation to the query builder.

Spanish translation#

Create a file called types.ts that exports the type Language, which consists of the two strings "en" and "es" (English and Spanish, respectively).

Add a state variable to the App component to track the language. Default the value to "en" to represent English.

Next, add a language selector at the top of the return statement.

Now we can configure translations for the query builder. Create a file called translations.ts in the client/src/ folder. The exported function should return a Translations object based on the provided language. Import defaultTranslations and the Translations type from react-querybuilder.

No discussions yet