15.9K ·GitHub
Что это такое?
Это React-компонент, который собирает полноценные веб-формы из JSON Schema: вы описываете поля декларативно, а он сам отрисовывает форму и проверяет введённые данные.
Это React-компонент, который собирает полноценные веб-формы из JSON Schema: вы описываете поля декларативно, а он сам отрисовывает форму и проверяет введённые данные.Это готовый онлайн-конструктор форм или библиотека, которую я добавлю в своё React-приложение?Это библиотека: вы устанавливаете npm-пакеты @rjsf и используете компонент Form внутри своего React-приложения. Единственное, что живёт в интернете, — это браузерный playground для пробных запусков.
Это библиотека: вы устанавливаете npm-пакеты @rjsf и используете компонент Form внутри своего React-приложения. Единственное, что живёт в интернете, — это браузерный playground для пробных запусков.Как добавить это в свой проект?Установите @rjsf/core из npm вместе с пакетом темы под ваш UI-кит и валидатором, затем отрисуйте компонент Form с вашей JSON Schema. Подробная документация работает на Docusaurus.
Установите @rjsf/core из npm вместе с пакетом темы под ваш UI-кит и валидатором, затем отрисуйте компонент Form с вашей JSON Schema. Подробная документация работает на Docusaurus.Что ещё нужно подключить, кроме React?Пакет темы под вашу библиотеку компонентов и валидатор JSON Schema: @rjsf/validator-ajv8, @rjsf/validator-ata или @rjsf/validator-cfworker.
Пакет темы под вашу библиотеку компонентов и валидатор JSON Schema: @rjsf/validator-ajv8, @rjsf/validator-ata или @rjsf/validator-cfworker.Что на практике значит «собирать формы из JSON Schema» — мне придётся вручную прописывать каждое поле?Нет: вы передаёте JSON Schema с описанием данных и правил, а компонент автоматически генерирует из неё соответствующие поля формы — в этом и смысл декларативного подхода.
Нет: вы передаёте JSON Schema с описанием данных и правил, а компонент автоматически генерирует из неё соответствующие поля формы — в этом и смысл декларативного подхода.Можно попробовать, ничего не устанавливая?Да — интерактивный playground размещён на GitHub Pages: набросаете схему и сразу увидите готовую форму прямо в браузере.
Да — интерактивный playground размещён на GitHub Pages: набросаете схему и сразу увидите готовую форму прямо в браузере.С какими библиотеками компонентов можно оформлять формы?Поставляется десять тем в виде пакетов: Ant Design v5, Bootstrap 3 и 5 (через React-Bootstrap), Chakra UI v3, Daisy UI v5, Fluent UI v9, Mantine, Material UI v7, Semantic UI v2 и Shad CN.
Поставляется десять тем в виде пакетов: Ant Design v5, Bootstrap 3 и 5 (через React-Bootstrap), Chakra UI v3, Daisy UI v5, Fluent UI v9, Mantine, Material UI v7, Semantic UI v2 и Shad CN.Насколько это зрелый проект — можно ли положиться на него в проде?Проект развивается с 2015 года, у него около 16 000 звёзд на GitHub, лицензия Apache-2.0, а код живёт в монорепозитории с CI, тестами и проверкой типов TypeScript.
Проект развивается с 2015 года, у него около 16 000 звёзд на GitHub, лицензия Apache-2.0, а код живёт в монорепозитории с CI, тестами и проверкой типов TypeScript.What are similar projects?formily, redux-form, react-bootstrap, selectize.js, formik, ajv, primitives, evergreen
formily, redux-form, react-bootstrap, selectize.js, formik, ajv, primitives, evergreenWhich topics is it in?declarative-ui, data-validation, antd, form, json-schema, forms, schema, bootstrap, validation, component-library, json, ui-components
declarative-ui, data-validation, antd, form, json-schema, forms, schema, bootstrap, validation, component-library, json, ui-components