React-toastify v- akhirnya mudah untuk disesuaikan

Tidak pernah mendengar tentang react-toastify sebelum ini? Pergi semak demo

Apa yang baharu dalam v11

Saya sangat teruja dengan keluaran ini! Fokus utama adalah pada penyesuaian dan matlamat saya adalah untuk memperkasakan anda (dan diri saya sendiri) supaya anda boleh memperibadikan rupa dan rasa untuk pemberitahuan sepenuhnya.

Ringkasnya, react-toastify sepatutnya boleh digabungkan ke dalam mana-mana sistem reka bentuk.

Tidak perlu mengimport fail css lagi

Lembaran gaya kini disuntik secara automatik, jadi anda tidak perlu mengimportnya lagi. Fail CSS masih dieksport oleh pustaka.

  import { ToastContainer, toast } from 'react-toastify';

  function App(){
    const notify = () => toast("Wow so easy !");

    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }

Penyesuaian mudah!

Salah satu permintaan teratas ialah cara menyesuaikan pemberitahuan. Untuk bersikap adil, sehingga keluaran ini, ia agak mencabar kerana ia memerlukan pengguna untuk mengatasi banyak kelas CSS.

Saya telah mempermudahkan struktur DOM pemberitahuan dengan mengalih keluar elemen div luar, elemen bersarang, dsb... Ini merupakan perubahan besar yang ketara, tetapi usaha ini benar-benar berbaloi. Saya dengan yakin boleh mengatakan bahawa perpustakaan kini boleh menyepadukan dengan lancar ke dalam mana-mana sistem reka bentuk.

Di bawah, saya telah melaksanakan beberapa reka bentuk berbeza menggunakan Tailwind sahaja. Saya tidak mengatasi satu pun kelas CSS daripada react-toastify ?!

Kepala ke stackblitz untuk menyemak kod.

Bagaimana ia berfungsi dalam amalan? Di sebelah kiri, kami mempunyai struktur DOM lama berbanding yang baharu di sebelah kanan.

• Toastify__toast-body dan anaknya kini hilang sepenuhnya.
• Button Tutup kini menggunakan kedudukan mutlak.

Terima kasih kepada perubahan itu, tiada apa yang akan mengganggu kandungan anda.

Toastify__toast mempunyai beberapa nilai lalai yang wajar (cth., jejari sempadan, bayang, dll...) yang boleh disesuaikan menggunakan css atau dengan mengemas kini pembolehubah css yang berkaitan:

width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
padding: var(--toastify-toast-padding);
border-radius: var(--toastify-toast-bd-radius);
box-shadow: var(--toastify-toast-shadow);
max-height: var(--toastify-toast-max-height);
font-family: var(--toastify-font-family);

Bar kemajuan tersuai

Membenarkan bar kemajuan tersuai tiada dalam senarai tugasan saya sama sekali semasa bekerja pada keluaran ini. Tetapi melihat betapa mudahnya untuk menyesuaikan pemberitahuan sekarang, saya tidak dapat menahannya ?.

Bahagian terbaiknya ialah anda tidak perlu berkompromi dengan ciri seperti autoTutup, jedaOnHover, jedaOnFocusLoss atau bar kemajuan terkawal—ia hanya berfungsi dengan lancar untuk anda.

Berikut ialah intipati kecil.

function App() {
  const notify = () => {
    toast(CustomComponent, {
      autoClose: 8000,
      // removes the built-in progress bar
      customProgressBar: true
    });
  };

  return (
    <div>
      <button onClick={notify}>notify</button>
      <ToastContainer />
    </div>
  );
}

// isPaused is now available in your component
// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...
function CustomComponent({ isPaused, closeToast }: ToastContentProps) {
  return (
    <div>
      <span>Hello</span>
      <MyCustomProgressBar isPaused={isPaused} onAnimationEnd={() => closeToast()} />
    </div>
  );
}

Tuju ke stackblitz untuk mendapatkan contoh langsung.

Kebolehcapaian dan navigasi papan kekunci

ToastContainer dan roti bakar menerima prop ariaLabel(akhirnya...). Ini agak membantu untuk pembaca skrin dan juga untuk ujian.
Contohnya, dalam cypress anda boleh melakukan cy.findByRole("alert", {name: "label aria yang anda nyatakan"}).

  import { ToastContainer, toast } from 'react-toastify';

  function App(){
    const notify = () => toast("Wow so easy !");

    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }

Jika pemberitahuan kelihatan dan pengguna menekan alt ia akan menumpukan pada pemberitahuan pertama yang membolehkan pengguna menggunakan Tab untuk menavigasi elemen berbeza dalam pemberitahuan itu.

Kekunci panas sudah tentu boleh ditukar.

width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
padding: var(--toastify-toast-padding);
border-radius: var(--toastify-toast-bd-radius);
box-shadow: var(--toastify-toast-shadow);
max-height: var(--toastify-toast-max-height);
font-family: var(--toastify-font-family);

Sebab penyingkiran pemberitahuan dengan panggilan balik onClose

Adakah anda ingin tahu sama ada pengguna menutup pemberitahuan atau jika ia ditutup secara automatik? Yakinlah, ini kini boleh dilakukan!

Tandatangan panggilan balik onClose kini onClose(sebab?: boolean | rentetan) => batal.

Apabila pengguna menutup pemberitahuan, hujah sebabnya adalah sama dengan benar. Dalam contoh di bawah, saya telah menamakan hujah saya
removeByUser untuk menjelaskan niat.

function App() {
  const notify = () => {
    toast(CustomComponent, {
      autoClose: 8000,
      // removes the built-in progress bar
      customProgressBar: true
    });
  };

  return (
    <div>
      <button onClick={notify}>notify</button>
      <ToastContainer />
    </div>
  );
}

// isPaused is now available in your component
// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...
function CustomComponent({ isPaused, closeToast }: ToastContentProps) {
  return (
    <div>
      <span>Hello</span>
      <MyCustomProgressBar isPaused={isPaused} onAnimationEnd={() => closeToast()} />
    </div>
  );
}

Jika anda menggunakan komponen tersuai untuk pemberitahuan anda, anda mungkin mahu lebih kawalan ke atas sebabnya, terutamanya jika ia mengandungi
berbilang seruan tindak.

toast("hello", {
  ariaLabel: "something"
})

? Memecahkan Perubahan

useToastContainer dan useToast tidak lagi terdedah

Kail itu tidak boleh digunakan melainkan anda menyelam lebih dalam dalam kod sumber react-toastify untuk memahami cara melekatkan sesuatu. Ini bukan yang saya mahukan untuk pengguna saya, ia adalah keputusan yang tidak baik untuk mendedahkan mereka pada mulanya, saya telah belajar pengajaran yang baik.

onClose dan onOpen tidak lagi menerima prop kanak-kanak

Setelah difikirkan, saya tidak sepatutnya melakukan ini. Ciri ini boleh dikatakan tidak digunakan. Di bawah tandatangan baharu untuk setiap panggilan balik:

• diBuka: () => batal
• onClose: (sebab?: boolean | rentetan) => batal

Penggayaan

• react-toastify/dist/ReactToastify.minimal.css telah dialih keluar.
• Scss tiada dalam gambar sekarang. Perpustakaan menggunakan css lama yang bagus.
• bodyClassName dan bodyStyle tidak diperlukan lagi.
• progressBarStyle untuk mengurangkan permukaan api. Ia kini merupakan cara yang lebih baik untuk menyesuaikan segala-galanya tanpa bergantung pada gaya sebaris.
• injectStyle telah dialih keluar. Fungsi ini tidak diperlukan lagi.
• Kelas css Toastify__toast-body dan anak langsungnya telah dialih keluar.

? Pembetulan Pepijat

• tambah sokongan untuk react19 #1177 #1185
• eksport semula CloseButtonProps #1165
• baiki terbaharuOnTop untuk kali ini #1176
• tidak lagi membuang ralat hodoh ini: Tidak dapat menetapkan sifat yang tidak ditentukan (menetapkan 'togol') #1170
• Panggil balik onClose tidak lagi ditangguhkan sehingga animasi keluar selesai #1179

?Apa seterusnya?

Saya sedang menulis semula sebahagian daripada dokumentasi secara beransur-ansur. Saya telah mencipta koleksi pada stackblitz, dengan cara ini anda boleh mencari semua contoh di satu tempat. Saya akan terus menambah lebih banyak contoh semasa saya pergi.

Atas ialah kandungan terperinci React-toastify v- akhirnya mudah untuk disesuaikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!