Description
React and Material-UI Rendering Layer for MSON
MSON-React alternatives and similar libraries
Based on the "Form Logic" category.
Alternatively, view MSON-React alternatives based on common mentions on social networks and blogs.
-
formik
Build forms in React, without the tears π [Moved to: https://github.com/jaredpalmer/formik] -
react-hook-form
π React Hooks for form state management and validation (Web + React Native) -
react-jsonschema-form
A React component for building Web forms from JSON Schema. -
redux-form
A Higher Order Component using react-redux to keep form state in a Redux store -
Formily
π±π π§© Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 -
react-final-form
π High performance subscription-based form state management for React -
surveyjs
Free Open-Source JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout that lets you load and run multiple web forms, or build your own self-hosted form management system, retaining all sensitive data on your servers. You have total freedom of choice as to the backend, because any server + database combination is fully compatible. -
JSONForms
Customizable JSON Schema-based forms with React, Angular and Vue support out of the box. -
winterfell
Generate complex, validated and extendable JSON-based forms in React. -
react-validation-mixin
Simple validation mixin (HoC) for React. -
formcat
A simple and easy way to control forms in React using the React Context API -
Table of Contents
forml - extensible react json schema form generator -
react-client-validation
Simple and super lightweight validation for React. -
@mozartspa/mobx-react
High performance, hook-based forms library for React, powered by MobX.
Appwrite - The Open Source Firebase alternative introduces iOS support
Do you think we are missing an alternative of MSON-React or a related project?
README
MSON-React
UI Rendering Layer for React and Material-UI
Getting Started
Getting Started App
The best way to get started with MSON is to play with the Getting Started App. In just a few lines of MSON, you'll generate an app that can list, edit, filter and sort a list of contacts. And, for extra fun, you can use Firebase to make it real-time capable.
Autogenerate forms in React and Material-UI with MSON
Implementing great forms can be a real time-waster. With just a few lines of JSON, you can use MSON to generate forms that perform real-time validation and have a consistent layout.
Adding MSON-React to Your Existing React Project
yarn add @date-io/date-fns @material-ui/core date-fns @material-ui/pickers mson mson-react typeface-roboto
- Note: this is needed as MSON and MSON-React are libraries that work in conjunction with React, Material UI and Date-IO. As such, these dependencies are peer dependencies.
- Add the following to the head section of your index.html:
html <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Note: MSON-React uses font icons as the user can specify any Icon during runtime and the alternative of bundling all the icons as SVG icons would make your JS bundle huge
More info
See MSON for details