MutationObserver + React: меняем ошибки UI Kit без патча библиотеки

Привет, на связи снова я – React-разработчик Дмитрий. Сегодня отвлечемся от теории и разберем конкретный случай и какое решение для него использовалось. При работе с готовыми UI-библиотеками часто возникает небольшая проблема — компонент хорош, но его поведение нельзя настроить под требования конкретного случая. Я столкнулся с этим на практике, когда в используемой версии UI Kit не было возможности кастомизировать тексты выводимых ошибок, а бизнес-требования четко задали формулировки. В моём случае это был компонент для загрузки файлов. Он работал исправно — позволял выбрать файл, проверял его размер и формат и при ошибках показывал сообщение. Проблема была только в тексте этих сообщений. Нужно было использовать просто другую формулировку текста ошибки. Собственно, выглядит компонент загрузки файла вот так:

https://habr.com/ru/companies/gnivc/articles/949862/

#mutationobserver #javascript #Reac #reactjs #reactjs #ui_kit

🟧 Style Observer
by @bramus
A MutationObserver for CSS, powered by CSS Transitions and `transition-behavior: allow-discrete`.
You can use this to track changes in any CSS Property, including Custom Properties
#css #webdev #Observer #MutationObserver

https://github.com/bramus/style-observer

#toRead #bookmark #JS #mutationObserver #DOM

Getting To Know The MutationObserver API
https://www.smashingmagazine.com/2019/04/mutationobserver-api-guide/

How to track changes in the DOM using MutationObserver
https://medium.com/all-technology-feeds/how-to-track-changes-in-the-dom-using-mutationobserver-583136df2328

Detect, Undo And Redo DOM Changes With Mutation Observers
https://addyosmani.com/blog/mutation-observers/