Web Overflow 🇺🇦 | TanStack Form 📋Ми вже багато розповідали про продукти від TanStack — у...

TanStack Form 📋Ми вже багато розповідали про продукти від TanStack — у них уже сформувалася ціла екосистема. Нещодавно вони представили ще один інструмент — TanStack Form.Його створення мотивували відсутністю вбудованих засобів для роботи з формами у багатьох фреймворках. Через це розробникам доводиться або писати власні рішення, або використовувати сторонні бібліотеки. TanStack Form має на меті вирішити проблеми продуктивності (згадуємо redux-form), складної валідації та композиції форм.Ось простий приклад використання TanStack Form:const form = useForm({ defaultValues: { ... }, onSubmit: async ({ value }) => { ... },})...<form.Field name="firstName" validators={{ onChange: ({ value }) => !value ? 'A first name is required' : undefined, }} children={(field) => ( <> <label htmlFor={field.name}>First Name:</label> <input id={field.name} name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} /> <FieldInfo field={field} /> </> )}/> Завдяки використанню form.Field тут є гарна підтримка TypeScript, а також можна пропускати деякі пропси (аналогічно до <Controller control /> у react-hook-form).Валідація підтримується як для всієї форми (через useForm, зокрема зі схемами типу zod), так і для окремих полів.Що одразу привертає увагу - підхід через children. Полю передається функція, а не JSX-елементи. Команда TanStack у коментарях зазначає, що render-пропси - "great". А що думаєте ви?👉 Відкрити посилання#library