/meteor-react-autoform

Meteor autoform for React using aldeed/meteor-simple-schema

Primary LanguageJavaScript

Meteor-React-Autoform

meteor-react-autoform will translate your Meteor aldeed:SimpleSchema into a React form using Material-UI components.

Requirements

  1. React v15 and Material-UI v0.15 (if you're using React v0.14 please use meteor-react-autoform v0.92)
  2. Meteor v1.3

Installation

  1. Installed the NPM package: $ npm i meteor-react-autoform --save
  2. Install the Meteor package: $ meteor add aldeed:collection2
  3. Extend your SimpleSchema to allow our materialForm object. Place the below code above your schema definitions (see example):
  // Documentation -> https://github.com/MechJosh0/meteor-react-autoform
  // Extend the schema to allow our materialForm object
  SimpleSchema.extendOptions({
    materialForm: Match.Optional(Object)
  })
  1. See the element examples list to see how to write the materialForm object in your schema.

WARNING

This is still in active development. Basic form elements are available, see below for todo list.

TODO

  • Automated testing
  • Multiple select element
  • Array of string elements
  • Object fields
  • Array of object fields

Usage

Example

/client/modules/contact/components/contactPage.jsx

  import React from 'react';
  import ReactAutoForm from 'meteor-react-autoform';
  import HelpDeskCollection from '/lib/collections/helpDesk';

  const redirectPageToNewDocument = (docId) => {
    // You can redirect the client URL to your new documentId. For example if you're using FlowRouter:
    // FlowRouter.go(`${FlowRouter.path('helpDesk.update')}/${docId}`);
  };

  const HelpDesk = () => (
    <div>
      <h1>Contact Us</h1>
      <ReactAutoForm collection={HelpDeskCollection} type="insert" onSubmit={redirectPageToNewDocument} />
    </div>
  );

  export default HelpDesk;

ReactAutoForm props

  • collection={HelpDesk} REQUIRED You must provide the collection you wish to use for building your form.
  • type=["insert", "update"] REQUIRED You must set the type prop which must equal either "insert" or "update".
    • type="update" doc={$document} OPTIONAL To update a document you must set the type="update" and provide the document you wish to update in the doc prop.
  • useFields={['name', 'text']} OPTIONAL Only produce the fields name and description from the Collection in the form.
  • formClass="myCustomFormClass" OPTIONAL You may provide a custom className for the form, otherwise it will use the default autoform_{$collectionName}.
  • debug={true} OPTIONAL This will output the forum data into the console when the user attempts to submit.
  • onSubmit={(docId) => { console.log("New document", docId); }} OPTIONAL Function to run when an insert is successful, the new docId is passed through to your custom function.

SimpleSchema object

Example

/lib/collections/helpDesk.js

  import {Mongo} from 'meteor/mongo';

  const HelpDesk = new Meteor.Collection('helpDesk');

  // Documentation -> https://github.com/MechJosh0/meteor-react-autoform
  // Extend the schema to allow our materialForm object
  SimpleSchema.extendOptions({
    materialForm: Match.Optional(Object)
  })

  const schema = {
    name: {
     type: String,
     materialForm: {
       floatingLabelText: 'Your name',
       hintText: 'Sarah Smith...'
     }
    },
    description: {
     type: String,
     min: 10,
     max: 200,
     materialForm: {
       floatingLabelText: 'Describe your problem',
       rows: 1,
       rowsMax: 10,
       multiLine: true,
       hintText: 'I require a password reset...'
     }
    },
    reoccurringProblem: {
      type: Boolean,
      defaultValue: true,
      label: 'Have you had the problem before?',
      materialForm: {
        switcher: 'Checkbox'
      }
    }
  };

  HelpDesk.attachSchema(schema);

  HelpDesk.allow({
    insert: (userId, doc) => {
      return true;
    }
  });

  export default HelpDesk;

Image Preview

Element Examples

Global parameters

  • label String | Input label
  • max Number | Set the max length of an input
  description: {
    type: String,
    label: 'Description',
    max: 10
  }

Text

A normal text input will only need a type of String to display. See Material-UI text field to find what properties are available for passing into our materialForm object.

  description: {
    type: String,
    materialForm: {
      hintText: 'Please enter the description...'
    }
 }

  password: {
    type: String,
    label: 'Password',
    materialForm: {
      type: 'password'
    }
  }

Textarea

Inside the materialForm object, using either materialForm.rows materialForm.rowsMax or materialForm.multiLine will cause the input to turn into a textarea. See Material-UI text field to find what properties are available for passing into our materialForm object.

  description: {
    type: String,
    materialForm: {
      rows: 1,
      rowsMax: 3,
      multiLine: true
    }
  }

Number

Type Number will change the element to a number input. min and max values are taken into consideration if available. See Material-UI text field to find what properties are available for passing into our materialForm object.

  favoritePositiveInteger: {
    type: Number,
    max: 10,
    min: 5,
    materialForm: {
      step: 0.2
    }
  }

Date

Type Date will provide a date select. min and max values are taken into consideration if available. See Material-UI date picker to find what properties are available for passing into our materialForm object.

  birthday: {
    type: Date,
    label: 'Your birthday',
    defaultValue: new Date('2014-10-18T00:00:00.000Z'),
    materialForm: {
      dateMode: 'landscape',
      autoOk: true
    }
  }

Tick box

Type Boolean will use materialForm.switcher to determine to display either a checkbox or a toggle component. By default will use the checkbox Material-UI component materialForm.switcher = 'Checkbox', or if you can change it to use the toggle component materialForm.switcher = 'Toggle'. Check out the respective Material-UI documentation on each component to find out what other properties are available for passing into our materialForm object.

  agree: {
    type: Boolean,
    label: 'Do you agree?',
    defaultValue: false,
    materialForm: {
      switcher: 'Checkbox'
      // OR
      //switcher: 'Toggle'
    }
  }

Select dropdown menu

Use allowedValues = [] to create a select dropdown menu. You can provide materialForm.options = [] to pass through an object[label: 'Example', value: 'durp'] for each option. You can pass through any select-field properties by using materialForm.selectOptions = [].

  choose3: {
    type: Number,
    allowedValues: [
      1,
      2,
      3
    ],
    optional: true,
    label: 'Choose a number',
    materialForm: {
      selectOptions: {
        className: 'selectExample'
      },
      options: [
        {
          label: 'One',
          value: 1
        },
        {
          label: 'Two',
          value: 2
        },
        {
          label: 'Three',
          value: 3
        }
      ]
    }
  }

Radio button

When you use allowedValues = [] with materialForm.switcher = 'Radio' this will display radio box options. You can provide materialForm.options = [] and pass through any RadioButton properties into each option, you can also pass through RadioButtonGroup properties by using materialForm.groupOptions = [].

  agree: {
    type: String,
    allowedValues: [
      'red',
      'green'
    ],
    label: 'What colour is the sky?',
    materialForm: {
      switcher: 'Radio',
      groupOptions: {
        className: 'radioExample'
      },
      options: [
        {
          label: 'Red',
          value: 'red'
        },
        {
          label: 'Green',
          value: 'green'
        }
      ]
    }
  }

Credits

Developed and maintained by Aluminati