@letar/forms

Установка

Установка @letar/forms и зависимостей

Установка

npm install @letar/forms @tanstack/react-form @chakra-ui/react zod framer-motion
# или с bun
bun add @letar/forms @tanstack/react-form @chakra-ui/react zod framer-motion
# или с pnpm
pnpm add @letar/forms @tanstack/react-form @chakra-ui/react zod framer-motion

Опциональные зависимости

Для drag & drop сортировки в массивах полей:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Для масок ввода (телефон, кредитная карта и т.д.):

npm install use-mask-input

Зависимости

ПакетВерсияОбязательный
react>= 18.0.0Да
@tanstack/react-form>= 1.0.0Да
@chakra-ui/react>= 3.0.0Да
framer-motion>= 10.0.0Да
zod>= 3.24.0Да
@dnd-kit/*>= 6.0.0Нет
use-mask-input>= 3.0.0Нет

Настройка

Убедитесь что в приложении настроен ChakraProvider:

import { ChakraProvider, defaultSystem } from '@chakra-ui/react'

function App({ children }) {
  return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
}

Готово! Можно использовать @letar/forms.

On this page