React MUI Right-to-left

Last Updated : 18 Oct, 2022

Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Right-to-left utility in the Material-UI library.

The Right-to-left Utility provided by MUI is used to change the direction of the alignment of MUI components from right to left. This is beneficial when supporting languages such as Arabic, Persian, or Hebrew.

Syntax:

<ParentComponent dir="rtl">
    <ChildComponent />
</ParentComponent>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material
npm install stylis stylis-plugin-rtl
npm install @emotion/react @emotion/cache

Project Structure: It will look like the following.

Example 1: In this example, we will create a simple application that uses the Right-to-left utility to create an input HTML element that displays text from right to left.

Now write down the following code in the App.js file. Here, App is our default component where we have written our code:

Filename: App.js

Javascript

import * as React from 'react'; 
import { createTheme, ThemeProvider } from '@mui/material/styles'; 
import rtlPlugin from 'stylis-plugin-rtl'; 
import { prefixer } from 'stylis'; 
import { CacheProvider } from '@emotion/react'; 
import createCache from '@emotion/cache'; 
  
const theme = createTheme({ 
    direction: 'rtl', // Both here and <body dir="rtl"> 
}); 
  
// Create rtl cache 
const cacheRtl = createCache({ 
    key: 'muirtl', 
    stylisPlugins: [prefixer, rtlPlugin], 
}); 
  
export default function Direction() { 
    return ( 
        <CacheProvider value={cacheRtl}> 
            <ThemeProvider theme={theme}> 
                <div 
                    className="head"
                    style={{ 
                        width: "fit-content", 
                        margin: "auto", 
                    }} 
                > 
                    <h1 
                        style={{ 
                            color: "green", 
                        }} 
                    > 
                        GeeksforGeeks 
                    </h1> 
                    <strong>React MUI Right-to-left util</strong> 
                    <br /> 
                    <br /> 
                </div> 
                <div dir="rtl" style={{ display: 'flex',  
                    justifyContent: 'center' }}> 
                    <input type="text" placeholder="Name" /> 
                </div> 
            </ThemeProvider> 
        </CacheProvider> 
    ); 
} 

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will create a simple application that uses the Right-to-left utility to change the order of buttons from right to left. Change your App.js like the one below.

Javascript

import * as React from 'react'; 
import { createTheme, ThemeProvider } from '@mui/material/styles'; 
import rtlPlugin from 'stylis-plugin-rtl'; 
import { prefixer } from 'stylis'; 
import { CacheProvider } from '@emotion/react'; 
import createCache from '@emotion/cache'; 
import { Button } from '@mui/material'; 
  
const theme = createTheme({ 
    direction: 'rtl', // Both here and <body dir="rtl"> 
}); 
  
// Create rtl cache 
const cacheRtl = createCache({ 
    key: 'muirtl', 
    stylisPlugins: [prefixer, rtlPlugin], 
}); 
export default function Direction() { 
    return ( 
        <CacheProvider value={cacheRtl}> 
            <ThemeProvider theme={theme}> 
                <div 
                    className="head"
                    style={{ 
                        width: "fit-content", 
                        margin: "auto", 
                    }} 
                > 
                    <h1 
                        style={{ 
                            color: "green", 
                        }} 
                    > 
                        GeeksforGeeks 
                    </h1> 
                    <strong> 
                        React MUI Right-to-left util 
                    </strong> 
                    <br /> 
                    <br /> 
                </div> 
                <div dir="rtl" style={{ display: 'flex',  
                    justifyContent: 'center', gap: '5px' }}> 
                    <Button variant='contained' color='success'> 
                        Success button 
                    </Button> 
                    <Button variant='contained' 
                        color='secondary'> 
                        Secondary button 
                    </Button> 
                </div> 
            </ThemeProvider> 
        </CacheProvider> 
    ); 
} 