packages/components/containers/rightToLeft/Provider.tsx

   1 import React, { useEffect, useState } from 'react';
   2
   3 import RightToLeftContext from './context';
   4
   5 const getIsRTL = (lang: string) => {
   6     return /^fa/.test(lang);
   7 };
   8
   9 interface Props {
  10     children: React.ReactNode;
  11 }
  12
  13 export const RightToLeftProvider = ({ children }: Props) => {
  14     const state = useState(getIsRTL(document.documentElement.lang));
  15     const [isRTL, setRTL] = state;
  16
  17     useEffect(() => {
  18         const observer = new MutationObserver((e) => {
  19             if (e.some(({ attributeName }) => attributeName === 'lang')) {
  20                 setRTL(getIsRTL(document.documentElement.lang));
  21             }
  22         });
  23         observer.observe(document.documentElement, { attributes: true });
  24         return () => {
  25             observer.disconnect();
  26         };
  27     }, []);
  28
  29     useEffect(() => {
  30         document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
  31     }, [isRTL]);
  32
  33     return <RightToLeftContext.Provider value={state}>{children}</RightToLeftContext.Provider>;
  34 };