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:
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:
- Building the UI
- 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>
);
}
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>
);
}
At this point, you should have something like this 👇 👇 👇
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>
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>
);
}
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 👇 👇 👇
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"
.
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>
);
}
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";
Step 2: Next, create a slice of state to keep track of the RTL and LTR states.
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.
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>
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")}
/>
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>
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>
);
}
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)