Right-to-Left Layout

Tokyo React Typescript Admin Dashboard fully supports right-to-left layouts. By default, the RTL support is disabled, but it's easy to enable it.

Uncomment the lines in the below example, inside src\theme\ThemeProvider.tsx

1// import { CacheProvider } from '@emotion/react';
2// import createCache from '@emotion/cache';
3// import stylisRTLPlugin from 'stylis-plugin-rtl';
4
5// const cacheRtl = createCache({
6//   key: 'bloom-ui',
7//   prepend: true,
8//   // @ts-ignore
9//   stylisPlugins: [stylisRTLPlugin]
10// });
11
12return (
13  
14    {/* <CacheProvider value={cacheRtl}> */}
15      
16    {/* </CacheProvider> */}
17  
18);

When using a RTL layout, in public\index.html you will have to add dir="rtl" to the body or html tag.

Also, inside the used theme (eg. src\theme\schemes\PureLightTheme.ts) you will have to uncomment direction: i18n.dir(), and import i18n from 'src/i18n/i18n'; or simply replace i18n.dir() with 'rtl' if you don't want automatic RTL detection.