Skip to content

Conversation

@d3varaja
Copy link
Contributor

@d3varaja d3varaja commented Oct 15, 2025

Introduces a new useRTL React hook to detect right-to-left (RTL) text direction and enhance component compatibility for RTL layouts.
Updates components and styles to use logical CSS properties for consistent behavior across LTR and RTL contexts.
Adds test coverage for the useRTL hook and verifies RTL functionality in BaseOrganizationSwitcher.
Exports the new hook in the React package for developer use.


Purpose

Provide consistent right-to-left language support across Asgardeo React components and enable dynamic RTL detection through a reusable hook.


Related Issues


Related PRs

N/A


Checklist


Security Checks


Package Affected

  • @asgardeo/react

Changeset

---
'@asgardeo/react': minor
---

Add RTL support and `useRTL` hook for React package to enhance layout direction handling and improve accessibility for right-to-left languages.

@d3varaja d3varaja changed the title Add RTL support and useRTL hook to React package feat(react): add RTL support and useRTL hook Oct 15, 2025
@brionmario
Copy link
Member

brionmario commented Oct 23, 2025

Hey @d3varaja,

Great work.
There seems to be a build error. Can you please check this!

High level comments:

  • IMO, we need to incorporate RTL in to the ThemePreferences interface. And pass the direction as a AsgardeoProvider param.

And then use the useTheme to access the direction rather than implementing a new RTL hook.

ex:
```
<AsgardeoProvider
   preferences={{
      theme: {
         direction: 'rtl',
         // rest
      }
   }
>
```
  • Once this is done, please check a sample with the React SDK and the Next.js SDK and provide us with a screenshot.

Introduces a new useRTL hook for detecting right-to-left (RTL) text direction and updates components and styles to use logical CSS properties for RTL compatibility. Adds tests for the useRTL hook and RTL support in BaseOrganizationSwitcher. Updates exports to include useRTL.
…con flipping

  - Add direction property to ThemePreferences interface (ltr/rtl)
  - Convert component styles to CSS logical properties
  - Implement icon flipping for RTL mode in OrganizationSwitcher
  - Add comprehensive RTL tests
  - Remove redundant useRTL hook (use useTheme instead)
@d3varaja d3varaja force-pushed the feat/rtl-support-secure branch from 76a757b to ff1f698 Compare October 25, 2025 21:48
@d3varaja
Copy link
Contributor Author

Hi @brionmario, Thanks for the feedback! I've addressed your comments,

All feedback has been addressed:

  • Removed useRTL hook
  • Managed RTL via ThemePreferences in AsgardeoProvider
  • Implemented CSS logical properties
  • Added icon flipping
  • Updated tests
  • Rebased with main
  • Created the changeset

The CI lint failures appear to be pre-existing on main and unrelated to the RTL changes

LRT Version

Screenshot 2025-10-26 at 02-58-43 Vite React TS

RTL Verision

Screenshot 2025-10-26 at 03-00-30 Vite React TS

@d3varaja d3varaja force-pushed the feat/rtl-support-secure branch 4 times, most recently from e7394ab to ff1f698 Compare October 26, 2025 08:20
@brionmario brionmario added the hacktoberfest-accepted Label required by the Hacktoberfest participating PRs to be listed on the user's profile label Oct 27, 2025
@brionmario brionmario changed the title feat(react): add RTL support and useRTL hook feat(react): add RTL support Oct 27, 2025
@asgardeo-github-bot
Copy link

⚠️ No Changeset found

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go.

If these changes should result in a version bump, you need to add a changeset.

Refer Release Documentation to learn how to add a changeset.

@brionmario brionmario merged commit 77c88b9 into asgardeo:main Oct 31, 2025
3 of 6 checks passed
@brionmario
Copy link
Member

Hey @d3varaja,

Thanks for the contribution.
I've merged the PR.

Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

hacktoberfest-accepted Label required by the Hacktoberfest participating PRs to be listed on the user's profile

Projects

None yet

Development

Successfully merging this pull request may close these issues.

chore: add RTL support for @asgardeo/react & @asgardeo/nextjs UI components

3 participants