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.

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";
};

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>
  );
};

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.