UI Rendering Layer for React and Material-UI
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:
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
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
See MSON for details