Skip to content

Instantly share code, notes, and snippets.

@redgeoff

redgeoff/index.html

Last active October 11, 2018 18:51
Show Gist options
  • Save redgeoff/a69ca781d143277fcda341b5de9423ca to your computer and use it in GitHub Desktop.
Save redgeoff/a69ca781d143277fcda341b5de9423ca to your computer and use it in GitHub Desktop.
Download ZIP
MSON: Basic Form 1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MSON: Basic Form 1</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Include babel so that we can use JSX in this example without compiling -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/mson-react/dist/msonreact.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script type="text/babel">
const compiler = msonreact.compiler;
const Component = msonreact.Component;
const form = compiler.newComponent({
component: 'Form',
fields: [
{
name: 'fullName',
component: 'PersonFullNameField'
},
{
name: 'submit',
component: 'ButtonField',
label: 'Submit',
type: 'submit',
icon: 'Save'
}
]
})
form.on('submit', () => console.log(form.getValues()))
ReactDOM.render(<Component component={form} />, document.getElementById('root'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment