De la topicul acesta cred ca m-am dezvoltat destul de mult pe partea de frontend si mai ales pe partea de React (dar inca mai este foarte mult loc si de asta postez si aici ca poate invat ceva nou de la voi).
Am avut nenorocul sa lucrez cu React Hook Form. E cu mult sub Formik din punct al developer-friendliness. Mi se pare ca are o gramada de boilerplate (aka Redux), iar in unele cazuri, cand ai de-a face cu anumite componente de Material mai complexe, precum ar fi Autocomplete, apar complicatii.
Da, poate sa iasa o mamaliga cu watch abuzat de cei care nu citesc documentatia. La dropdown-uri e mai greu.
Legat de boilerplate cred ca te referi la control si options, validarea functioneaza foarte frumos combinat cu yup.
De fapt, da, formik e mult mai ok fiindca ai o componenta de form custom, in cazul meu pot sa am un div, un form normal sau altceva (in functie de cat de mult a citit si inteles omul documentatia) si te uiti unde incepe si se termina form-ul iar handlerul la onSubmit poate sa difere la butoane.
Grija mare la modale, toastere, tooltips si dropdown-uri cu librariile headless, in special cand aveti modal in modal in modal… Am trecut pe MUI ca sa avem componente decente, MUI nu-l recomand din cauza dificultatilor cu TypeScript, cateodata te face sa innebunesti cand nu-i place ceva si vrei doar sa pui un amarat de buton.
Grija mare la modale, toastere, tooltips si dropdown-uri cu librariile headless, in special cand aveti modal in modal in modal…
La ce te referi? care sunt problemele?
RadixUI poate fii folosit si ca sursa de inspiratie. sau doar sa iei ce-i necesar de acolo.
Din RadixUI folosesc componenta de AspectRatio in proiectul curent, dar au chestii misto pe acolo.
Cate despre modale si dropdown/popover prefer sa le implementez singur.
Hai sa zicem ca ai un tabel cu filtre care sunt popover-uri intr-un modal, am avut probleme precum rerandarea lor cum ai dat click pe ceva din popover in modal dar nu si inafara.
Ai folosit vreo librarie atunci cand ai intampinat acele probleme?
Pentru dropdown-uri si modal incepusem sa folosesc o componenta extrasa cred ca din MUI sau Polaris, si mi-a creat ceva probleme.
Dupa am decis sa merg la sigur cu hook-ul asta care poate sa fie modificat in functie de ce preferinte ai, unde accepti si nu accepti click-uri.
import { RefObject } from 'react';
import useEventListener from './useEventListener';
type Handler = (event: MouseEvent) => void;
function useOnClickOutside<T extends HTMLElement = HTMLElement>(
ref: RefObject<T>,
handler: Handler,
mouseEvent: 'mousedown' | 'mouseup' = 'mousedown'
): void {
useEventListener(mouseEvent, (event) => {
const el = ref?.current;
// Do nothing if right click is pressed
if (event.button === 2) return;
// Do nothing if clicking ref's element or descendent elements
if (!el || el.contains(event.target as Node)) return;
handler(event);
});
}
export default useOnClickOutside;
) - https://beta.react-spring.dev/
Bear necessities for state management in React (github.com)