<button id="toggleBtn">Toggle RTL</button>
<pdf-atelier id="pdfAtelier" license="My License" src="/document.pdf"></pdf-atelier>

<script>
  const toggleBtn = document.getElementById('toggleBtn');
  const pdfAtelier = document.getElementById('pdfAtelier');

  let isRTL = false;
  toggleBtn.addEventListener('click', () => {
    isRTL = !isRTL;
    if (isRTL) {
      pdfAtelier.setAttribute('rtl-layout', '');
    } else {
      pdfAtelier.removeAttribute('rtl-layout');
    }
  });
</script>

import { useState } from 'react';
import { PDFAtelier } from '@innosoft/pdf-atelier-react';

export default function App() {
  const [isRTL, setIsRTL] = useState(false);

  return (
    <>
      <button onClick={() => setIsRTL(!isRTL)}>Toggle RTL</button>
      <PDFAtelier
        src="/document.pdf"
        license="My License"
        rtlLayout={isRTL}
      />
    </>
  );
}

import { Component } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [PdfAtelierWrapper],
  template: `
    <button (click)="toggleRTL()">Toggle RTL</button>
    <pdf-atelier-wrapper
      [src]="'/document.pdf'"
      [license]="'My License'"
      [rtlLayout]="isRTL"
    ></pdf-atelier-wrapper>
  `,
})
export class AppComponent {
  isRTL = false;

  toggleRTL() {
    this.isRTL = !this.isRTL;
  }
}

<script setup lang="ts">
import { ref } from 'vue';
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';

const isRTL = ref(false);
const toggleRTL = () => {
  isRTL.value = !isRTL.value;
};
</script>

<template>
  <button @click="toggleRTL">Toggle RTL</button>
  <PdfAtelierWrapper
    :src="'/document.pdf'"
    :license="'My License'"
    :rtlLayout="isRTL"
  />
</template>