How to enable Right-to-Left (RTL) support using Chakra UI
Tags: react, javascript, tutorial, webdev
Published: 2021-11-09 10:07:29

RTL support is a means of building your website or app in a way that is responsive to the RTL text direction.  

English and many other languages are written LTR but there are quite a number of languages that go from RTL such as Arabic, Hebrew and a few more.
&nbsp;
 
In this post I'll show you how to create this card component using Chakra UI as well as enable RTL support:

![Right to left support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14in1x0w8rgxzbzmq4w8.gif)

&nbsp;

## **Importance of RTL**

- Helps you reach a wider audience
- Boosts customer interactions
- Improve conversions 


Chakra UI supports RTL languages across all components using RTL-aware style props.


For ease of understanding, **let's divide this post into 2 parts:**
1. Building the UI
2. Enabling RTL support

Here we go!

&nbsp;

## Part 1: Building the UI

We’ll start off by using [Chakra’s JavaScript code sandbox template](https://codesandbox.io/s/chakra-ui-javascript-lzzg9).

**Step 1:** First, let’s buildout the content area using `HStack` to horizontally layout the `Avatar`, `Heading` and `Tag`  components in `index.js`.


```jsx
import {
  ChakraProvider,
  HStack,
  Avatar,
  Tag,
  Heading,
} from "@chakra-ui/react";

function App() {

  return (
    <ChakraProvider>
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>       
    </ChakraProvider>
  );
}
```
&nbsp;
**Step2:** Now, add in the `Text` component just below `HStack`. Then, wrap `HStack` and `Text` within a `Box`.

```jsx
import {
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";

function App() {

  return (
    <ChakraProvider>
        <Box>
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>
          <Text mt={4}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </Text>
        </Box>
    </ChakraProvider>
  );
}
```

At this point, you should have something like this 👇 👇 👇
![Card component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ii3n8grfsal1056dxt8g.png)

&nbsp;

**Step 3:** Next, it's time to add some more styles to the `Box` using [style props](https://chakra-ui.com/docs/features/style-props). 

```jsx
import {
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";

<Box
  paddingY="8"
  bg="white"
  shadow="md"
  borderStartWidth="5px"
  borderStartColor="teal"
  paddingStart="8"
  paddingEnd="6"
>
  <HStack>
    <Avatar
      name="Jill Vince"
      src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
    />
    <Heading fontSize="xl">Jill Vince</Heading>
    <Tag size="sm" variant="solid" colorScheme="teal">
      Developer
    </Tag>
  </HStack>
  <Text>
    Lorem Ipsum is simply dummy text of the printing and 
    typesetting industry. Lorem Ipsum has been the industry's 
    standard dummy text ever since the 1500s, when an unknown 
    printer took a galley of type and scrambled it to make a 
    type specimen book.
  </Text>
</Box>
```
&nbsp;
> Notice we're using the [CSS Logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) instead of the physical properties.

So, `borderStartWidth` instead of `borderLeftWidth`, 
    `borderStartColor` instead of `borderLeftColor`,
    `paddingStart` instead of `paddingLeft`,
    `paddingEnd` instead of `paddingRight`.


Physical properties like `left` or `right` don't automatically adjust in RTL layout. This is where logical properties come- they make the layout automatically flip from RTL to LTR and back.

&nbsp;

**Step 4:** Let's add the star icon at the top right. Chakra provides a set of commonly used interface icons you can use in your project, called [Chakra icons](https://chakra-ui.com/docs/media-and-icons/icon#using-chakra-ui-icons). 
We'd use the `StarIcon` and import it.

&nbsp;
> Chakra Icons is a dependency so you'd need to install it if you're using it. Alternatively, you can use a [third-party icon library](https://chakra-ui.com/docs/media-and-icons/icon#using-a-third-party-icon-library).

```jsx
import {
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";
import { StarIcon } from "@chakra-ui/icons";

function App() {

  return (
    <ChakraProvider>
        <Box
          paddingY="8"
          bg="white"
          shadow="md"
          borderStartWidth="5px"
          borderStartColor="teal"
          paddingStart="8"
          paddingEnd="6"
        >
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>
          <StarIcon
            top="8"
            insetEnd="8"
            color="orange.500"
          />
          <Text mt={4}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </Text>
        </Box>
    </ChakraProvider>
  );
}
```
&nbsp;

*Our `Card` component is looking good! You're doing amazing and only a few steps are left!* 😉

### [Learn how to truncate text using Chakra UI] (https://dev.to/estheragbaje/how-to-truncate-text-using-chakra-ui-4mpj)

&nbsp;
**Step 5:** Position the `StarIcon` relative to the parent `Box`. To do this, we'd need to assign position `relative` to the `Box` and position `absolute` to the `StarIcon`. Next, go ahead to add in the remaining styles for the icon.

&nbsp;

Now you should have something like this 👇 👇 👇
![Card component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzpiyun1tgwcb9hibres.png)


&nbsp;
> At this point, you'll notice two things from our card. The first thing is, the card is too close to the edge of the screen and needs a bit of padding. The second, there needs to be a parent container with a gray color.

&nbsp;
**Step 6:** Add a parent `Box` to wrap the entire component and style it like this: `padding="4"` `bg="gray.100"`.

![Card component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzpkp9mmmvrnqfegu0q3.png)

&nbsp;

### The final UI code is:

```jsx
import React from "react";
import {
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Center,
  Switch,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";
import { StarIcon } from "@chakra-ui/icons";

function App() {

  return (
    <ChakraProvider>
      <Box padding="4" bg="gray.100">
        <Box
          position="relative"
          paddingY="8"
          bg="white"
          shadow="md"
          borderStartWidth="5px"
          borderStartColor="teal"
          paddingStart="8"
          paddingEnd="6"
        >
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>
          <StarIcon
            position="absolute"
            top="8"
            insetEnd="8"
            color="orange.500"
          />
          <Text mt={4}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </Text>
        </Box>
      </Box>
    </ChakraProvider>
  );
}

```
&nbsp;

## Part 2: Enabling RTL support

Now that we've built out this UI, it's  time to add RTL support.

&nbsp;

**Step 1:** First, we import `extendTheme` function from "@chakra-ui/react". You'd need this to add direction key to the theme.

```jsx
import {  extendTheme } from "@chakra-ui/react";
```

&nbsp;

**Step 2:** Next, create a slice of state to keep track of the RTL and LTR states.

```jsx
const [dir, setDir] = React.useState("ltr");
```
We also need to set the direction prop, `dir` and set it to this `dir` state on the `Box` component.

&nbsp;

**Step 3:** Next, we go to ChakraProvider and add a `direction` key to the theme using the `extendTheme` function.

 ```jsx
<ChakraProvider theme={extendTheme({ direction: dir })}>
...
</ChakraProvider>
```

&nbsp;

**Step 4:** Since we'll be switching between LTR and RTL layouts, we need build out a switch that toggles this state and gives the right layout accordingly.

We'll do this using the `Switch` component and assign an onChange handler to it.

```jsx
  <Switch
    onChange={(e) => setDir(e.target.checked ? "rtl" : "ltr")}
  />
```

&nbsp;

**Step 5:** Finally, to beautify this `Switch`, let's center it and add LTR and RTL labels. 

```jsx
  <Center mt="4">
    <HStack>
      <Text>LTR</Text>
      <Switch
        onChange={(e) => setDir(e.target.checked ? "rtl" : 
        "ltr")}
      />
      <Text>RTL</Text>
    </HStack>
  </Center>
```

The final code snippet with RTL support enabled will look like this:
```jsx
import React from "react";
import {
  extendTheme,
  Box,
  ChakraProvider,
  HStack,
  Avatar,
  Center,
  Switch,
  Tag,
  Heading,
  Text
} from "@chakra-ui/react";
import { StarIcon } from "@chakra-ui/icons";

function App() {
  const [dir, setDir] = React.useState("ltr");

  return (
    <ChakraProvider theme={extendTheme({ direction: dir })}>
      <Box padding="4" bg="gray.100">
        <Box
          dir={dir}
          position="relative"
          paddingY="8"
          bg="white"
          shadow="md"
          borderStartWidth="5px"
          borderStartColor="teal"
          paddingStart="8"
          paddingEnd="6"
        >
          <HStack>
            <Avatar
              name="Jill Vince"
              src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80"
            />
            <Heading fontSize="xl">Jill Vince</Heading>
            <Tag size="sm" variant="solid" colorScheme="teal">
              Developer
            </Tag>
          </HStack>
          <StarIcon
            position="absolute"
            top="8"
            insetEnd="8"
            color="orange.500"
          />
          <Text mt={4}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </Text>
        </Box>

        <Center mt="4">
          <HStack>
            <Text>LTR</Text>
            <Switch
              onChange={(e) => setDir(e.target.checked ? "rtl" : "ltr")}
            />
            <Text>RTL</Text>
          </HStack>
        </Center>
      </Box>
    </ChakraProvider>
  );
}

```
&nbsp;


## Build with RTL support in mind
Great job, you did it! You can apply this knowledge to enable RTL on any of Chakra UI component. If you'd love a more visual walkthrough, check out this [YouTube video](https://youtu.be/PzEHoqLj4OM).

For teams looking to get more international clients interact with their product and expand their reach, ensuring your website or app support RTL languages should be a priority. Chakra UI gives RTL support across all components. [Get started today for FREE](https://chakra-ui.com/).