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

Question

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?

Answer 1

My final approach if it is useful for someone:

I followed @LucasOliveira approach but went a little bit further and this is what I did using ex-react-native-i18n but you can use whatever plugin you feel most comfortable with:

• First I declared a helper method inside my component to return a single object with the complete translation

• Pass the translation object down to the "Dummy" component

ContaninerComponent.js

class ContainerComponent extends React.Component {
  ...
  // Load translation outside context.
  loadTranslation() {
    return {
      string1: I18n.t('key1'),
      string2: I18n.t('key2'),
      string3: I18n.t('key3')
    }
  }
  ...

  render() {
    return(
      <MyAwesomeComponent
         ...props
         translation={this.loadTranslation()}
      />
    );
  }
}

Then, in the dummy component I set up a default translation, to fit the case in which the translation is not set and then I created a helper method to handle the possible not handled strings and avoid undefined values:

MyAwesomeComponent.js

const MyAwesomeComponent = ({ ..., translation }) => {

  const strings = handleTranslation(translation);

  return (
      .... some JSX here ....
  );

};

const DEFAULT_TRANSLATION = {
  string1: 'Your Default String',
  string2: 'Your Default String',
  string3: 'Your Default String'
}

const handleTranslation = (translation) => {
  if (translation === undefined) return DEFAULT_TRANSLATION;
  return {
    string1: (translation.string1 !== undefined) ?
        translation.string1 : DEFAULT_TRANSLATION.string1;

    string2: (translation.string2 !== undefined) ?
        translation.string2 : DEFAULT_TRANSLATION.string2;

    string3: (translation.string3 !== undefined) ?
        translation.string3 : DEFAULT_TRANSLATION.string3;
  }
};

And now the whole translation is safe to use from the "strings" variable.

Hope it helps!

Answer 2

I would go for the second approach, cause the ability to define your object outside the component declaration, gonna make your component accepts an object, a string, a date, etc... allowing you to treat then later. Doing that :

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

means our code doesn't need to know that it is being rendered , as this will be your component responsibility