26 lines
797 B
TypeScript
26 lines
797 B
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CacheProvider } from '@emotion/react';
|
|
import createCache from '@emotion/cache';
|
|
import rtlPlugin from 'stylis-plugin-rtl';
|
|
|
|
// This provider configures Emotion's cache to support RTL.
|
|
export const RtlProvider: React.FC<{ children: React.ReactNode }> = ({
|
|
children,
|
|
}) => {
|
|
const { i18n } = useTranslation();
|
|
const [cache, setCache] = useState(createCache({ key: 'css' }));
|
|
|
|
useEffect(() => {
|
|
const newDir = i18n.dir(i18n.language);
|
|
|
|
const newCache = createCache({
|
|
key: 'css',
|
|
stylisPlugins: newDir === 'rtl' ? [rtlPlugin] : [],
|
|
});
|
|
setCache(newCache);
|
|
}, [i18n, i18n.language]);
|
|
|
|
return <CacheProvider value={cache}>{children}</CacheProvider>;
|
|
};
|