GsdForm

Formik-based React library to create forms from plain JS objects (or JSON!)

Demo

Installing

yarn add gsd-form

Usage

import GsdForm from 'gsd-form'
import 'gsd-form/style.css' // Optional

class App extends Component {
  render() {
    return <GsdForm data={data} />
  }
}

Form data example

data = {
  form: {
    submitButton: {
      text: 'Send', // Optional. Default : Submit
      component: CustomComponent,
    },
    fields: { ... }, // Inline form
    // For forms sections you can use an array with nested fields
    // P.S.: These fields will be flattened on submit
    fields: [
      {
        name: 'String',
        fields: { ... } // Equal inline form
      }
    ],
  },
  recaptcha: {
    size: 'invisible', // one of compact, normal, invisible
    sitekey: 'SITEKEY_CODE',
  },
  showFormState: Boolean // Optional
  honeypot: Boolean // Optional
}

Field props

Property	Type	Description
label	`String`	Label text
name	`String`	Field (HTML input) name
component	`String`	Options - `input`, `textarea`, `select`
fieldClass	`String`	-
disabled	`String`	`disabled`
value	`String`	Initial (default) value
format	`String`	Options - `numeric`, `phone`, `date`
validate	`Array<String>`	`[Yup validator, Optional custom error message]` ex.: `validate: [ 'string', ['email', 'Invalid email format'], 'required', ]` More
Field Select	-	-
options	`Array<Object>`	Options for `select` inputs - `[{ value: 'One', label: 'One' }]`
placeholder	`String`	`select` placeholder text'
noOptionsMessage	`String`	Fallback text for empty `select` options

You can also pass any other ReactSelect prop to select fields, such as menuIsOpen.

Method props

class App extends Component {
  handleSubmit (value, setters) {
    // send to a REST API ...
    console.log('onSubmit', value)
    setters.setSubmitting(false)
  }

  handleChanges (name, value) {
    // Called when each field changes
    console.log('handleChanges', name, value)
  }

  buttonProps (form) {
    // Called when each field changes
    console.log('buttonProps', form)
  }

  render() {
    return (
      <GsdForm
        data={data}
        handleSubmit={this.handleSubmit}
        handleChanges={(name, value) => this.handleChanges(name, value)}
        buttonProps={form => this.buttonProps(form)}
      />
    )
  }
}

export default App

See that the handleSubmit function has both parameters passed by Formik: values and a series of setters (errors, values, submitting, ...). You could use those to use backend validation or manage the loading/submitting state, for example.

You can use the handleChanges prop to, for example, change the available options for interdependent select inputs, such as country/state/city.

Another useful GsdForm prop is values, which can be used to pass dynamic values to Formik and make whatever desired inputs fully controlled by your parent component.

Dependencies

Contributing and developing

The projectwas created using create-react-library, so it should have its] basic structure updated soon. Right now, all the lib content should reside inside src, everything else can be used when developing or as examples.

You can start the dev server running:

yarn start

A production version can be generated using:

yarn build

AvantSD / gsd-form