Skip to content

feat: add dir prop for RTL support #574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pradel merged 1 commit into from
Sep 24, 2026
Merged

feat: add dir prop for RTL support #574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions react-responsive-modal/__tests__/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -792,6 +792,28 @@ describe('modal', () => {
});
});

describe('prop: dir', () => {
it('should render the modal with the dir attribute', async () => {
const { getByTestId } = render(
<Modal open onClose={() => null} dir="rtl">
<div>modal content</div>
</Modal>,
);

expect(getByTestId('root').getAttribute('dir')).toBe('rtl');
});

it('should not render the dir attribute by default', async () => {
const { getByTestId } = render(
<Modal open onClose={() => null}>
<div>modal content</div>
</Modal>,
);

expect(getByTestId('root').hasAttribute('dir')).toBe(false);
});
});

describe('prop: ref', () => {
it('should set the modal element to a ref object', () => {
const ref = React.createRef<HTMLDivElement>();
Expand Down
6 changes: 6 additions & 0 deletions react-responsive-modal/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,10 @@ export interface ModalProps {
* ARIA description for modal
*/
ariaDescribedby?: string;
/**
* Text direction of the modal content.
*/
dir?: 'ltr' | 'rtl' | 'auto';
/**
* Avoid unpleasant flickering effect when body overflow is hidden. For more information see https://www.npmjs.com/package/body-scroll-lock
*/
Expand Down Expand Up @@ -193,6 +197,7 @@ export const Modal = React.forwardRef(
onAnimationEnd,
children,
reserveScrollBarGap,
dir,
}: ModalProps,
ref: React.ForwardedRef<HTMLDivElement>,
) => {
Expand Down Expand Up @@ -332,6 +337,7 @@ export const Modal = React.forwardRef(
className={cx(classes.root, classNames?.root)}
style={styles?.root}
data-testid="root"
dir={dir}
>
<div
className={cx(classes.overlay, classNames?.overlay)}
Expand Down
4 changes: 2 additions & 2 deletions react-responsive-modal/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
.react-responsive-modal-modal {
max-width: 800px;
display: inline-block;
text-align: left;
text-align: start;
vertical-align: middle;
background: #ffffff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
Expand All @@ -50,7 +50,7 @@
.react-responsive-modal-closeButton {
position: absolute;
top: 14px;
right: 14px;
inset-inline-end: 14px;
border: none;
padding: 0;
cursor: pointer;
Expand Down
1 change: 1 addition & 0 deletions website/src/docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,7 @@ By default, the Modal will be rendered at the end of the html body tag. If you w
| **ariaLabel** | `string` | | ARIA label for modal |
| **ariaLabelledby** | `string` | | ARIA labelledby for modal |
| **ariaDescribedby** | `string` | | ARIA description for modal |
| **dir** | `"ltr" \| "rtl" \| "auto"` | | Text direction of the modal content. |
| **containerId** | `string` | | id attribute for modal container |
| **modalId** | `string` | | id attribute for modal | |
| **onClose\*** | `() => void` | | Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key. |
Expand Down
Loading