24 lines
751 B
TypeScript
24 lines
751 B
TypeScript
import React, { useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CacheProvider } from '@emotion/react';
|
|
import createCache from '@emotion/cache';
|
|
import rtlPlugin from 'stylis-plugin-rtl';
|
|
import { prefixer } from 'stylis';
|
|
|
|
// This provider configures Emotion's cache to support RTL.
|
|
export const RtlProvider: React.FC<{ children: React.ReactNode }> = ({
|
|
children,
|
|
}) => {
|
|
const { i18n } = useTranslation();
|
|
|
|
const cacheRtl = useMemo(() => {
|
|
const isRtl = i18n.dir(i18n.language) === 'rtl';
|
|
return createCache({
|
|
key: isRtl ? 'muirtl' : 'muiltr',
|
|
stylisPlugins: isRtl ? [prefixer, rtlPlugin] : [],
|
|
});
|
|
}, [i18n]);
|
|
|
|
return <CacheProvider value={cacheRtl}>{children}</CacheProvider>;
|
|
};
|