Using DropConfig for Website Translations

Clay Murray
DropConfig
Published in
2 min readMay 15, 2019
Photo by Chris Ried on Unsplash

Using DropConfig can make it easy to add and update translations for your website.

It then enables you to easily pass off the translation work to other people.

We are going to be using react in this example with DropConfig.

The scenario

We want to be able to pass a translation key to a React component and have the proper translation loaded depending on the user’s browser.

The DropConfig document.

We will want to create a document that has at the top level the key of the language we want to use. The children will be the key value pairs of the translation key and value.

e.g.

{
“en-US”: {
“homepage_welcome”: “Welcome”
}
}

Why DropConfig?

DropConfig allow you to pass off all the work of translations to other people on your team or in your company.

You just have to give them the URL and they can fill in the data without breaking the JSON!

See Form UI in our docs for more info

The React Component

This is a pretty simple component all the hard work will be done in our translation loader and `get`-er

The Translation Loader

I hope this helps you with translations on your site and seeing the power of DropConfig

--

--