Skip to content

Latest commit

 

History

History
94 lines (77 loc) · 3.64 KB

README.md

File metadata and controls

94 lines (77 loc) · 3.64 KB

@stellar-apps/forms

This package contains form-related components with helpers for fetch-based forms using Formik and curls in the background.

Installation

yarn add @stellar-apps/forms

Usage

import {FetchForm, Input, TextArea} from '@stellar-apps/forms'


function ContactForm (props) {
  return (
    <FetchForm endpoint='/contact'>
      {({isSubmitting, handleSubmit, json}) => {
        if (json.status === 200) {
          return <Redirect to='/success'/>
        }
        
        return (
           <form onSubmit={handleSubmit}>
             <Input type='email' name='email' validate={...}/>
             <TextArea name='message'  validate={...}/>
             
             <button type='submit' disabled={isSubmitting}>
               Submit
             </button>
           </form>
        )
      }}
    </FetchForm>
  )
}

FetchForm

A render props component for easily implementing a fetch-based form in Formik with JSON response handling. Requires a fetch polyfill in browsers

Props

In addition to the props below, it inherits props from Formik

  • endpoint {string}
    • This is the URL endpoint you'd like to send the form request to
  • confirm {func}
    • If defined, the fetch will only run if this function returns true
    • Receives two arguments (formikValues, formikBag) seen here
  • getRequestBody {func}
    • default (values, formikBag) => JSON.stringify(values)
    • Returns the body for the request
    • Receives two arguments (formikValues, formikBag) seen here
  • getRequestHeaders {func}
    • default () => ({}) //noop
    • Returns headers you'd like to attach to the request (e.g. CSRF)
    • Receives two arguments (formikValues, formikBag) seen here
  • onSubmit {func}
    • Called when the form is submitted and preempts the fetch() request for easy bailouts.
    • Receives two arguments (formikValues, formikBag) seen here

Render props

In addition to the render props below, it inherits render props from Formik

  • response {fetch.Response}
    • The response object returned by the fetch() request
  • json {fetch.json()}
    • The response JSON returned by await request.json()

Input

A wrapper for curls/Input and formik/Field

Props

In addition to the props below, this component accepts props from formik/Field and curls/Input

  • renderError {func}
    • Accepts two arguments error and form from Formik
    • Rendered after the curls <Input/> as part of a React.Fragment
    • Is only rendered if there is an error and the field has been touched

TextArea

A wrapper for curls/TextArea and formik/Field

Props

In addition to the props below, this component accepts props from formik/Field and curls/TextArea

  • renderError {func}
    • Accepts two arguments error and form from Formik
    • Rendered after the curls <TextArea/> as part of a React.Fragment
    • Is only rendered if there is an error and the field has been touched