Localize React & React-Native components keeping them as reusable as possible

Viewed 535

Recently I've been trying to keep my code as reusable as possible following the Container-Component design pattern in my React and React-Native applications. I usually try to make all the components dummy and let the container do the work and pass down the data using props.

Now I'm trying to localize these components but I want to keep them reusable for further projects. So far, I have come up with to solutions:

1.- Pass every single displayed string into the component as an individual prop. Like this.

<MyAwesomeComponent 
    ...props
    string1="String1"
    string2="String2"
    string3="String3"
  />

2.- Pass the translation as a single object

<MyAwesomeComponent 
   ...props
   translation={translation}
/>

I personally find a better solution the first one because it becomes easier to manage default props in the component.

Which one do you think is the best approach and why? Have you find a better approach?

2 Answers
Related