DEV Community

Cover image for How to enable Right-to-Left (RTL) support using Chakra UI
Esther Adebayo
Esther Adebayo

Posted on

How to enable Right-to-Left (RTL) support using Chakra UI

#javascript #react #webdev #tutorial

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.
 

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

 

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!

 

Part 1: Building the UI

We’ll start off by using Chakra’s JavaScript code sandbox template.

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



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>
  );
}
Enter fullscreen mode Exit fullscreen mode

 
Step2: Now, add in the Text component just below HStack. Then, wrap HStack and Text within a Box.



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>
  );
}
Enter fullscreen mode Exit fullscreen mode

At this point, you should have something like this 👇 👇 👇
Card component

 

Step 3: Next, it's time to add some more styles to the Box using style props. 



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>
Enter fullscreen mode Exit fullscreen mode

 

Notice we're using the 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.

 

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.
We'd use the StarIcon and import it.

 

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.



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>
  );
}
Enter fullscreen mode Exit fullscreen mode

 

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

 
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.

 

Now you should have something like this 👇 👇 👇
Card component

 

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.

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

Card component

 

The final UI code is: 



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>
  );
}
Enter fullscreen mode Exit fullscreen mode

 

Part 2: Enabling RTL support

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

 

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



import {  extendTheme } from "@chakra-ui/react";
Enter fullscreen mode Exit fullscreen mode

 

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



const [dir, setDir] = React.useState("ltr");
Enter fullscreen mode Exit fullscreen mode

We also need to set the direction prop, dir and set it to this dir state on the Box component.

 

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



<ChakraProvider theme={extendTheme({ direction: dir })}>
...
</ChakraProvider>
Enter fullscreen mode Exit fullscreen mode

 

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.



  <Switch
    onChange={(e) => setDir(e.target.checked ? "rtl" : "ltr")}
  />
Enter fullscreen mode Exit fullscreen mode

 

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



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

The final code snippet with RTL support enabled will look like this:



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>
  );
}
Enter fullscreen mode Exit fullscreen mode

 

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.

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.

Top comments (0)