VanillaJS Form.io Renderer

by Mike Cunneen

HTML

<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
<script src="https://unpkg.com/formiojs@latest/dist/formio.full.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/formio.full.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap"></script>
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
    <div id="root"></div>

Babel + JSX

const {
  colors,
  CssBaseline,
  ThemeProvider,
  Typography,
  Container,
  makeStyles,
  createTheme,
  Box,
  SvgIcon,
  Link,
} = MaterialUI;

const {Form} = Formio;

// Create a theme instance.
const theme = createTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: colors.red.A400,
    },
    background: {
      default: '#fff',
    },
  },
});

function LightBulbIcon(props) {
  return ( <
    SvgIcon {
      ...props
    } >
    <
    path d = "M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" / >
    <
    /SvgIcon>
  );
}

const useStyles = makeStyles(theme => ({
  root: {
    margin: theme.spacing(6, 0, 3),
  },
  lightBulb: {
    verticalAlign: 'middle',
    marginRight: theme.spacing(1),
  },
}));

function ProTip() {
  const classes = useStyles();
  return ( <
    Typography className = {
      classes.root
    }
    color = "textSecondary" >
    <
    LightBulbIcon className = {
      classes.lightBulb
    }
    />
    Pro tip: See more {
      ' '
    } <
    Link href = "https://material-ui.com/getting-started/templates/" >
    templates <
    /Link>{' '}
    on the Material - UI documentation. <
    /Typography>
  );
}



function App() {
  return ( <
    Container maxWidth = "sm" >
    <
    div style = {
      {
        marginTop: 24,
      }
    } >
    <
    Typography variant = "h4"
    component = "h1"
    gutterBottom >
    CDN v4 - beta example <
    /Typography> 
    <Form src="https://example.form.io/example" onSubmit={console.log} />
    <
    ProTip / >
    <
    /div> <
    /Container>
  );
}

ReactDOM.render( <
  ThemeProvider theme = {
    theme
  } > {
    /* CssBaseline kickstart an elegant, consistent, and...