title: react-intl: change div direction based on current locale
body: <p>So, here is my <code>App</code> component:</p>
  
  <pre><code>const App = () =&gt; {
    const [lang, setLang] = useState("en");
  
    return (
      &lt;IntlProvider
        locale={lang}
        key={lang}
        messages={lang == "en" ? englishMessages : arabicMessages}
      &gt;
        &lt;AppBar&gt;
          &lt;LangSwitch
            checked={lang == "en"}
            onChange={() =&gt; setLang(lang == "en" ? "ar" : "en")}
          &gt;&lt;/LangSwitch&gt;
        &lt;/AppBar&gt;
        &lt;Game /&gt;
      &lt;/IntlProvider&gt;
    );
  };
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>and, this is my <code>Game</code> component:</p>
  
  <pre><code>const Game = ()=&gt;
     (&lt;div direction = "???"&gt;
       I want to set direction to ltr if current locale is 'en' other wise to 'rtl'
     &lt;/div&gt;)
  </code></pre>
  
  <p>How can I read the current value of <code>locale</code>-set in the parent component of <code>IntlProvider</code>- inside child component of <code>Game</code> and set the property <code>direction</code> accordingly?</p>