Jadi, mari kita ambil kasus praktis.

Anda sedang mengembangkan Aplikasi Satu Halaman menggunakan React (dan mungkin Redux). Anda perlu mencetak beberapa dokumen. Untuk melakukannya, caranya mudah. Anda menampilkan halaman dan kemudian membiarkan pengguna menekan CTRL dan P. Voila. Halaman dicetak.

Dimana masalahnya? Misalkan Anda ingin (harus) mencetak 2 dokumen dalam orientasi berbeda. Salah satunya adalah potret dan yang lainnya lanskap.

Pendekatan naif

Kembali ke contoh kita, dengan menggunakan Chrome 56.0, buka dokumen pertamadengan dokumen tersebut, tekan CTRL + P lalu pilih mode Potret:

Berhasil. Sekarang, buka dokumen kedua, tekan CTRL + P, kali ini pilih Lansekap lalu cetak.

Sekarang, kita kembali ke dokumen pertama dan mengetik CTRL + P, di mana Chrome telah memilih mode Lanskapuntuk kita.

Ada masalah. Jika kami berasumsi bahwa pengguna akan mengubah pengaturannya setiap kali, kami salah. Pada akhirnya kita akan membuat Desain Pengguna yang buruk, yang bahkan dapat menimbulkan masalah: seperti mencetak dalam ukuran yang salah.

Bagaimana memperbaikinya?

Saya menghadapi masalah kecil dalam menyelesaikan skenario ini. Mengapa? Sederhananya, Anda tidak mempunyai kendaliatas orientasi menggunakan JavaScript.

Kita tahu bahwa kita dapat menggunakan size di CSS untuk mengatur orientasi halaman.

<style type="text/css">
  @media print{
    @page {
      size: landscape;
    }
  }
</style>

Tapi tunggu sebentar. Artinya orientasinya akan sama sampai kita menjelajah ke halaman lain. Kami memutuskan untuk tetap berada di halaman yang sama, tidak membuka halaman baru. Jadi, bagaimana cara memperbaikinya?

Oke, orientasi halaman dikontrol oleh kode itu. Bagaimana jika kita merangkum kode tersebut dalam 2 komponen: LandscapeOrientation dan PortraitOrientation lalu memasukkan salah satunya saat kita membutuhkannya.

LandscapeOrientation.jsx

export const LandscapeOrientation = () => (
  <style type="text/css">
    {"@media print{@page {size: landscape}}"}
  </style>
);

PortraitOrientation.jsx

export const PortraitOrientation = () => (
  <style type="text/css">
    {"@media print{@page {size: portrait}}"}
  </style>
);

Apakah ini berhasil? Ya, komponen menimpa opsi size, dengan menyetel favorit kita.

Aspek hebat lainnya adalah, Chrome kini menyembunyikan opsi orientasi. Pengguna tidak bisa lagi salah memilih ukuran.

Catatan: Saya tahu saya mengulangi kode, tetapi tidak berhasil dengan membuat satu Orientation component lalu Potret dan Lanskap memperluasnya.