WARNING

Before you use, please be aware of:

• there is no guarantee that this library will be actively maintained
• the software is provided "as it is"
• please expect occasional bugs with different combinations of the json structure used
• use on your own responsibility :)

Introduction

formik-generator is a library which allows you to generate forms from JSON input. It uses formik, react-select, react-datepicker and yup under the hood. You can play with formik-generator in your web browser with our live online playground.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save formik-generator

or

yarn add formik-generator

Usage

import React from 'react'
import { render } from 'react-dom'
import axios from 'axios'
import FormikGenerator from 'formik-generator'
import formStructure from './formStructure.json'

function onCancel() {
  console.log('cancel')
}

function onSubmit(values) {
  console.log(values)
}

function optionsGetter(url, query) {
  // this helper is required by AsyncCreatable field.
  // should return an array of strings, eg. ['yellow', 'green', 'blue']
  axios
    .get(url, { params: { query } })
    .then(response => response.data)
    .catch(err => console.error(err))
}

const initialValues = undefined // your initial values

const App = () => {
  return (
    <FormikGenerator
      formStructure={formStructure}
      initialValues={initialValues}
      onCancel={onCancel}
      onSubmit={onSubmit}
      optionsGetter={optionsGetter}
    />
  )
}

render(<App />, document.getElementById('root'))

Documentation

Full documentation with playgrounds available at: https://accelerated-digital.gitlab.io/formik-generator/