localize react/native apps

How to install

yarn add react-instant-translate
npm i react-instant-translate

🔨 Usage

in your app root

first lang object key would be the default langName if you didn't set the initial one

import { Provider, initTranslations } from "react-instant-translate/dist";

import firstLang from "your path to/whateverLang.json";
import secondLang from "your path to/whateverLang.json";
import thirdLang from "your path to/whateverLang.json";

initTranslations(
  {
    ar: {
      lang: firstLang,
      isRtl: true
    },
    en: {
      lang: secondLang,
      isRtl: false
    },
    fa: {
      lang: thirdLang,
      isRtl: true
    }
  },
  "ar" // default lang name
);

ReactDOM.render(
  // wrap your arr with Provider Component
  <Provider defaultLang="ar">
    <App />
  </Provider>,
  document.getElementById("root")
);

in any file your wanna use current lang

import React from "react";
import { useLocalize } from "react-instant-translate/dist";

const MyTextComponent = () => {
  const { currentTranslation } = useLocalize();
  return <p>{currentTranslation.login}</p>;
};

export default MyTextComponent;

For React-Native

import React from "react";
import { Text } from "react-native";
import { useLocalize, useTextDirection } from "react-instant-translate/dist";

const MyNativeTextComponent = () => {
  const { currentTranslation } = useLocalize();
  const txtDirStyle = useTextDirection();
  return <Text style={txtDirStyle}>{currentTranslation.login}</Text>;
};

export default MyNativeTextComponent;

import React from "react";
import { TextInput } from "react-native";
import { useLocalize, useTextDirection } from "react-instant-translate/dist";

const MyNativeTextInput = () => {
  const { currentTranslation } = useLocalize();
  const txtDirStyle = useTextDirection();
  return <TextInput style={txtDirStyle} />;
};

export default MyNativeTextInput;

import React from "react";
import { View } from "react-native";
import {
  useLocalize,
  useTransformDirection
} from "react-instant-translate/dist";

const MyScreenContainer = () => {
  const { useTransformDirection } = useLocalize();
  const dirStyle = useTransformDirection();
  return <View style={dirStyle}>// what ever children</View>;
};

export default MyScreenContainer;

Provider Props

Name	Type	Required
children	JSX of Array	Node
defaultLang	`string	undefined`

initTranslations Props

Name	Type	Required
langs	object of { langName:{ lang: jsonLang (Required), isRtl: boolean undefined } }	true
defaultLang	`string	undefined` (one of your langs keys)

useLocalize

Name	Type
currentTranslation	active translation object
activeLang	string
isRtl	if provides in initialization will retrun boolean
setLang	(newLangName) => void