Using DropConfig for website translations

powerc9000 profile image Clay Murray Updated on ・1 min read

Using DropConfig can make it easy to add translations for your website and enable 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 language. Then children key value pairs of the translation key and value.


    "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!

Form View

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

Posted on by:

powerc9000 profile

Clay Murray


I like programming and typically video games too! Working on games and stuff. They/Them


Verizon control and hosting for your config files. https://www.dropconfig.com


markdown guide