Nutella Pancake Machine

    @exodus/react-form

    1.1.3 • Public • Published

    Form Component

    Live Demo

    A simple React form component to gather data from users.

    The component takes a fields prop and generates a form interface. When the user clicks the "Submit" button, the onSubmit callback is called with a responses object.

    Server requests are not within the scope of this componenet; you can do whatever you like with the data that is returned.

    There are a few extra features like validation for required fields, all detailed below.

    The component comes with a set of default styles, which you can override if you like.

    If you have a feature request, please open an issue and we'll get to it asap.

    Installation

    yarn add @exodus/react-form
    

    You will also need some CSS to make it look right. This should be included alongside the component. An example theme can be found in styles.scss

    Input Types

    The live demo demonstrates all supported input types:

    • short_text: Simple text input.
    • free_text: Paragraph input.
    • boolean: Displays two radio inputs with "Yes" & "No" labels.
    • dropdown: Provide an array of choices, see below example for details. An option with the text Select an option… will be added automatically as the first option. If the field is required, something other than this option must be selected.
    • multiple_choice: If single_answer is set to true, it displays the options as radio inputs, if not then as checkboxes.
    • date: Returns a date in the format yyyy-mm-dd
    • numeric: Accepts float as well as int values.
    • file: Provide an array of accepted file types when using this type.

    Example Usage

    The following is a complete example which includes:

    • A sample array passed as the fields prop, showing what data to include for each input type. For example, the file type expects a supported_file_types array.

    • Usage of the loading prop: The "Submit" button is deactivated when set to true. (optional)

    • Usage of showWarning and warningText props: Shows warning text beneath the "Submit" button. (optional)

    • Beneath the code example, there is a sample responses object. This is what you can expect the onSubmit callback to receive.

    import React from 'react'
    import ReactForm from '@exodus/react-form'
    import '~/styles/react-form.scss'
    
    // Example fields data
    const fields = [
      {
        body: 'Full name', // Question text
        type: 'short_text',
        required: true,
        id: '22e55a',
      },
      {
        body: 'Email',
        type: 'short_text',
        required: true,
        validate: 'email',
        id: '22e55e',
      },
      {
        body: 'Summary',
        type: 'free_text',
        required: false,
        id: '22e55f',
      },
      {
        id: '22e55g',
        type: 'file',
        body: 'Resume',
        supported_file_types: ['pdf', 'doc', 'docx', 'jpg', 'png'],
        required: false,
      },
      {
        body: 'Test Yes/No',
        type: 'boolean',
        required: true,
        id: '22e560',
      },
      {
        body: 'Test Dropdown',
        type: 'dropdown',
        required: true,
        choices: [
          { body: 'choice 1', id: '107f36' },
          { body: 'choice2', id: '107f37' },
        ],
        id: '22e561',
      },
      {
        body: 'Test Multiple choice',
        type: 'multiple_choice',
        required: true,
        choices: [
          { body: 'choice 1', id: '107f38' },
          { body: 'choice 2', id: '107f39' },
        ],
        id: '22e562',
      },
      {
        body: 'Test Multiple choice (single answer)',
        type: 'multiple_choice',
        required: true,
        single_answer: true,
        choices: [
          { body: 'choice 1', id: '107f3a' },
          { body: 'choice 2', id: '107f3b' },
        ],
        id: '22e563',
      },
      {
        body: 'Test Date',
        type: 'date',
        required: true,
        id: '22e564',
      },
      {
        body: 'Test Number',
        type: 'numeric',
        required: true,
        id: '22e565',
      },
    ]
    
    class MyPage extends React.PureComponent {
      constructor(props) {
        super(props)
    
        this.state = {
          requestPending: false,
          showWarning: false,
          warningText: '',
        }
    
        this.onSubmit = this.onSubmit.bind(this)
      }
    
      onSubmit(responses) {
        // do whatever, such as parse the response and send to a server
    
        this.setState({
          requestPending: true,
        })
    
        fetch(`/submit-form`, {
          method: 'post',
          body: JSON.stringify({ shortcode: '1234', data: responses }),
        })
          .then((response) => {
            if (response.status === 200) {
              window.location.href = '/job-application-submitted'
            }
          })
          .catch((err) => {
            console.log(err)
    
            this.setState({
              requestPending: false,
              showWarning: true,
              warningText: 'There was an error and the application was not submitted!',
            })
          })
      }
    
      render() {
        const { requestPending, showWarning, warningText } = this.state
        return (
          <ReactForm
            fields={fields}
            loading={requestPending}
            showWarning={showWarning}
            warningText={warningText}
            onSubmit={this.onSubmit}
          />
        )
      }
    }
    
    export default MyPage

    Example responses object passed to the onSubmit callback as its first parameter. The object keys are the ids that were passed to the component with the fields prop. For required fields, isSet will always be true.

    {
      // short_text
      '22e55a': { value: 'Barty Crouch', isValid: true, isSet: true },
    
      // short_text (validate: 'email')
      '22e55e': { value: 'barty@gmail.com', isValid: true, isSet: true },
    
      // free_text (required: false)
      '22e55f': { value: '', isValid: true, isSet: false },
    
      // file
      '22e55g': { value: { name: 'file.txt', data: 'alskdfj;ak' }, isValid: true, isSet: true },
    
      // boolean
      '22e560': { value: false, isValid: true, isSet: true },
    
      // dropdown
      '22e561': { value: ['107f36'], isValid: true, isSet: true },
    
      // multiple_choice
      '22e562': { value: ['107f38', '107f39'], isValid: true, isSet: true },
    
      // multiple_choice (single_answer: true)
      '22e563': { value: ['107f3a'], isValid: true, isSet: true },
    
      // date
      '22e564': { value: '2020-01-24', isValid: true, isSet: true },
    
      // numeric
      '22e565': { value: 123, isValid: true, isSet: true },
    }

    Keywords

    Install

    npm i @exodus/react-form

    DownloadsWeekly Downloads

    25

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    38.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • richayotte
    • ralph.ba
    • angelloz
    • joshuabot
    • jamiemaw
    • exodus-justin.za
    • javiexodus
    • wcastr
    • brandon-exodus
    • rg911
    • alex.alexandrius
    • filipexodus
    • ryansquared-npm
    • andrescarreon
    • florianmathieu
    • dwolfgram
    • eox42
    • iamsaikranthi
    • janwe
    • fosterdill
    • eduardoexodus
    • fboucquez
    • skapala
    • umito
    • lanahizzle
    • iaacek
    • nafisholeh
    • ariene-exodus
    • ps.mcnally
    • akinncar
    • matias.la
    • voltagebots
    • kwwood
    • sergii_bo
    • mongkuen
    • philipcr
    • jacobbr22
    • lekzd
    • cdotta
    • alexandrbbm
    • danh.t.vo
    • ezenwankwogabriel
    • meniem
    • mzndako
    • kevva
    • aaronloexodus
    • feri42
    • jprichardson
    • farisissa
    • ryanzim
    • headfire
    • gutenye
    • mosesbot
    • roccomuso
    • dcastagnoli
    • sonaye
    • nareg_exodus
    • ves
    • tenaciousmv
    • asyakost
    • bulgakovk
    • chalker
    • andrejb
    • jaydp17
    • olistic
    • joepie91
    • merlz
    • jadechip
    • vbonini
    • devopsrobot
    • jenish-sojitra
    • unidwell
    • nachoalvarez
    • giovannirco
    • rec
    • dncabal
    • diegomura
    • lanre-mark
    • sunilagrawal
    • guillecura
    • mariosvlad
    • federico-po
    • pagan404