gsd-form

GsdForm

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

Demo

Single fields object

Multiple field sets

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

• Formik
• Yup
• React select 2
• React Google Recaptcha

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