DEV Community

Joodi
Joodi

Posted on

3 2 1 1 1

useFlexReverse Hook for Language-based Flex Direction Adjustment

This hook is particularly useful in multi-language websites where you want to adjust the layout direction based on the selected language (e.g., English and Persian). In some languages, like Persian (FA), content is read right-to-left (RTL), while in languages like English (EN), content is read left-to-right (LTR). If you need to dynamically reverse the direction of flex items based on the language, this hook provides a simple solution.

Image description

Image description

How It Works

When the language is set to English (en), this hook will return a class that applies a right-to-left (RTL) flex direction (flex-row-reverse). Conversely, if the language is Persian (fa) or any other language, it will apply the left-to-right (LTR) flex direction (flex-row).

Creating the Hook

  1. Inside the hooks folder, create a file named useFlexReverse.ts.
  2. Add the following code to define the hook:
// src/hooks/useFlexReverse.ts

export const useFlexReverse = (lang: string) => {
  return lang === "en" ? "flex-row-reverse" : "flex-row";
};
Enter fullscreen mode Exit fullscreen mode

How to Use the Hook

To use this hook in your components:

  1. Import the hook into your component.
  2. Determine the current language (for example, from the URL or a global state).
  3. Call the hook with the current language to dynamically get the flex direction class.
  4. Apply this class in your JSX code where needed.

Here's an example of how to implement it:

import { useFlexReverse } from "@/hooks/useFlexReverse";
import { usePathname } from "next/navigation"; // Assuming you're using Next.js

const YourComponent = () => {

  const pathname = usePathname();
  const langFromPath = pathname.split("/")[1] || "fa";
  const FlexReverse = useFlexReverse(langFromPath);

  const lang = useDictionary();

  return (
    <TabsTrigger value="phone"">
      <div className={`flex items-center gap-1 ${FlexReverse}`}>
        {lang.mobile}
        <Phone className="h-4 w-4 mb-1" />
      </div>
    </TabsTrigger>
  );
};
Enter fullscreen mode Exit fullscreen mode

Explanation:

  1. useFlexReverse(lang):

    • This hook takes the current language as an argument and returns either flex-row-reverse (for RTL languages like English) or flex-row (for LTR languages like Persian).
  2. Using the Hook:

    • In the component, usePathname() is used to get the current URL pathname. The language code is extracted from the URL (assuming the language is the first part of the path, like /en or /fa).
    • The useFlexReverse hook is called with the language code to determine the correct flex direction class.
  3. Applying the Class:

    • The className of the element is dynamically updated using the class returned by useFlexReverse. This allows for automatic adjustment of the flex direction based on the language.

Benefits of This Approach:

  • Dynamic Layout: The layout adjusts automatically when switching between languages without any additional manual styling.
  • Code Reusability: You can use the useFlexReverse hook wherever you need to apply this logic, keeping the code clean and DRY (Don't Repeat Yourself).
  • Seamless Localization: It makes it easy to localize flex-based layouts in your application, especially for RTL and LTR languages.

Conclusion

This simple yet powerful hook allows you to easily adjust the layout of your website or app based on the selected language, providing a better user experience for both RTL and LTR languages.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

๐Ÿ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityโ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple โ€œthank youโ€ goes a long wayโ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay