React Re-Form Component

The goal behind creating this form component was to normalize and simplify the process of creating complex forms. Hopefully, the process for creating forms is flexible enough for desired customization, but also consistent enough to work across all projects and platforms. If you have any questions, comments, or desired enhancements, please create an issue here: https://github.com/SMLMRKHLMS/re-form/issues. Thanks.

Getting Started

npm install --save re-form

This is the minimum amount of configuration and code needed for the form component to work properly. Note: your id properties located on each field should correspond to the key you are attempting to send to the server.

import {
  Checkbox,
  Datepicker,
  Email,
  Fieldset,
  File
  Form,
  Hidden,
  Radio,
  Select,
  Text,
  Textarea,
} from 're-form';

class Home extends React.Component {
  ... PropTypes, DefaultProps, State, Lifecycle & Class Methods
  render() {
    return (
      <div className={ this.props.className }>
        <Form action="post-path">
          <Checkbox id="checkbox" />
          <Datepicker id="datepicker" />
          <Email id="email" />
          <File id="file" />
          <Hidden id="hidden" />
          <Radio id="radio" />
          <Select id="select" />
          <Text id="text" />
          <Textarea id="textarea" />
        </Form>
      </div>
    );
  }
}

export default Home;

Things to Know

1. All fields need to be nested within the <Form /> component. They can also be nested under the <Fieldset /> component, which also must be nested under the <Form /> component.
2. Only required prop for <Form /> is action, which determines your post url.
3. Only required prop for any <Field /> component is id. This corresponds to the name of the field being sent to the server. Also, if a custom label prop is not passed, then a titleized version of the id used.
4. <Radio /> and <Select /> fields can be passed either children or an options prop. See below for more information.
5. You can only pass custom validation into <Email />, <Text />, and <Textarea />. Simply, anything that is a text field.
6. Please require the re-form.css file from node_modules/re-form/dist/ directory. It will provide you with important base styles that you can modify after you have imported them into you stylesheet.
7. If you have Google Analytics loaded on your page, you may utilize form event tracking.

Components

Containers

1. <Form />
2. <Fieldset />

Fields

1. <Checkbox />
2. <Datepicker />
3. <Email />
4. <File />
5. <Hidden />
6. <Radio />
7. <Select />
8. <Text />
9. <Textarea />

Containers

* Denotes a required prop.

1. <Form />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | action | string* | undefined | This corresponds to the url you will be posting your data to. | | className | string | '' | Custom className you may want to add for styling purposes. | | errorMessages | bool | true | By default when validation occurs, error messages will pop up. You can choose to shut these off globally using this property. | | eventAction | string | 'Completion' | The event action you want to send for form event tracking. | | eventCategory | string | 'Form' | The event category you want to send for form event tracking. | | eventLabel | string | '' | The event label you want to send for form event tracking. | | eventTracking | bool | false | Turns on/off form event tracking. | | eventValue | bool | number | string | 0 | The event value you want to send for form event tracking. | | id | string | 'form' | Custom id you may want to add to the form component for styling purposes. | | onFail | func | (error) => {} | Callback for when the form fails to post on submit. | | onSuccess | func | () => {} | Callback for when the form successfully posts on submit. | | placeholders | bool | false | Toggles between labels and placeholders. Labels are turned on by default. | | submitText | string | 'Submit' | Text to be displayed on the submit button. | | successMessage | string | 'Thank You for Your Submission!' | Text to be displayed within the success message. You can also pass in html: '<div>Thanks!</div>'. | | successModal | bool | false | Option to display success message inside of a modal. |

2. <Fieldset />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | className | string | '' | Custom className you may want to add for styling purposes. | | title | string | '' | Optional title to be displayed. You can also pass in html: '<h2>Title</h2>'. |

Fields

* Denotes a required prop.

1. <Checkbox />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | className | string | '' | Custom className you may want to add for styling purposes. | | id | string* | undefined | Property that determines the key that will be sent to the server. Also, if label is not provided, then the label will be titleized according to this id. | | label | bool | string | true | Labels are created intelligently by default according to the id you provide; however, you can also pass a string to this prop to display a custom label. You can also pass in html: 'This is a <br> label'. | | onChange | func | ({ value }) => {} | Callback that is fired when the value of your input changes. An object containing the value is currently the only thing passed. | | value | bool | false | Initial value to be passed. |

2. <Datepicker />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | className | string | '' | Custom className you may want to add for styling purposes. | | dateFormat | string | 'MM/DD/YYYY' | Format the date should be displayed in. | | errorMessage | bool | string | true | By default an error message is displayed when validation is failed. You can either set this to false to turn off the error message individually or you can pass in a custom error message, which also takes html: 'Error<br>Message.'; otherwise, the default error message will be displayed. | | id | string* | undefined | Property that determines the key that will be sent to the server. Also, if label is not provided, then the label will be titleized according to this id. | | label | bool | string | true | Labels are created intelligently by default according to the id you provide; however, you can also pass a string to this prop to display a custom label. You can also pass in html: 'This is a <br> label'. | | maxDate | string | undefined | Maximum date the calendar should display. | | minDate | string | undefined | Minimum date the calendar should display. | | onChange | func | ({ value }) => {} | Callback that is fired when the value of your input changes. An object containing the value is currently the only thing passed. | | validate | bool | false | If this is set to true, then validation will fail if a date is not picked. | | value | string | '' | Initial value to be passed. | | weekStart | string | '0' | Day of the week the calendar should start on. Default is Sunday. |

3. <Email />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | className | string | '' | Custom className you may want to add for styling purposes. | | errorMessage | bool | string | true | By default an error message is displayed when validation is failed. You can either set this to false to turn off the error message individually or you can pass in a custom error message, which also takes html: 'Error<br>Message.'; otherwise, the default error message will be displayed. | | id | string* | undefined | Property that determines the key that will be sent to the server. Also, if label is not provided, then the label will be titleized according to this id. | | label | bool | string | true | Labels are created intelligently by default according to the id you provide; however, you can also pass a string to this prop to display a custom label. You can also pass in html: 'This is a <br> label'. | | onChange | func | ({ value }) => {} | Callback that is fired when the value of your input changes. An object containing the value is currently the only thing passed. | | validate | bool | func(value) | false | If this is set to true, then validation will fail if a valid email is not provided. You can also pass in a callback function that takes passes the current value of the field. This callback must return a boolean value. | | value | string | '' | Initial value to be passed. |

4. <File />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | accepts | arrayOf(string) | ['doc', 'docx', 'gif', 'jpg', 'jpeg', 'pdf', 'png'] | Accepted file types that may be uploaded. | | className | string | '' | Custom className you may want to add for styling purposes. | | id | string* | undefined | Property that determines the key that will be sent to the server. Also, if label is not provided, then the label will be titleized according to this id. | | label | bool | string | true | Labels are created intelligently by default according to the id you provide; however, you can also pass a string to this prop to display a custom label. You can also pass in html: 'This is a <br> label'. | | maxSize | number | 2 | The maximum file size in Megabytes. | | onChange | func | ({ value }) => {} | Callback that is fired when the value of your input changes. An object containing the value is currently the only thing passed. | | validate | bool | false | If this is set to true, then validation will fail if a file is not uploaded. Also, regardless of whether or not this is set, if a file is uploaded, then it will check to see if a valid file type was passed and the file size does not exceed the maxSize prop. | | value | object | {} | Initial value to be passed. |

5. <Hidden />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | className | string | '' | Custom className you may want to add. | | id | string* | undefined | Property that determines the key that will be sent to the server. | | value | string | '' | Initial value to be passed. |

6. <Radio />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | className | string | '' | Custom className you may want to add for styling purposes. | | id | string* | undefined | Property that determines the key that will be sent to the server. Also, if label is not provided, then the label will be titleized according to this id. | | label | bool | string | true | Labels are created intelligently by default according to the id you provide; however, you can also pass a string to this prop to display a custom label. You can also pass in html: 'This is a <br> label'. | | onChange | func | ({ value }) => {} | Callback that is fired when the value of your input changes. An object containing the value is currently the only thing passed. | | options | arrayOf(shape(label: string, value: string) | string) | undefined | Options to be passed to <Radio />. You can also pass children instead in the form of '<option value="option">Option</option>' or simply '<option>Option</option>' | | value | string | '' | Initial value to be passed. |

7. <Select />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | className | string | '' | Custom className you may want to add for styling purposes. | | errorMessage | bool | string | true | By default an error message is displayed when validation is failed. You can either set this to false to turn off the error message individually or you can pass in a custom error message, which also takes html: 'Error<br>Message.'; otherwise, the default error message will be displayed. | | id | string* | undefined | Property that determines the key that will be sent to the server. Also, if label is not provided, then the label will be titleized according to this id. | | label | bool | string | true | Labels are created intelligently by default according to the id you provide; however, you can also pass a string to this prop to display a custom label. You can also pass in html: 'This is a <br> label'. | | onChange | func | ({ value }) => {} | Callback that is fired when the value of your input changes. An object containing the value is currently the only thing passed. | | options | arrayOf(shape(label: string, value: string) | string) | undefined | Options to be passed to <Select />. You can also pass children instead in the form of '<option value="option">Option</option>' or simply '<option>Option</option>' | | validate | bool | false | If this is set to true, then validation will fail if something is not selected. | | value | string | '' | Initial value to be passed. |

8. <Text />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | className | string | '' | Custom className you may want to add for styling purposes. | | errorMessage | bool | string | true | By default an error message is displayed when validation is failed. You can either set this to false to turn off the error message individually or you can pass in a custom error message, which also takes html: 'Error<br>Message.'; otherwise, the default error message will be displayed. | | id | string* | undefined | Property that determines the key that will be sent to the server. Also, if label is not provided, then the label will be titleized according to this id. | | label | bool | string | true | Labels are created intelligently by default according to the id you provide; however, you can also pass a string to this prop to display a custom label. You can also pass in html: 'This is a <br> label'. | | onChange | func | ({ value }) => {} | Callback that is fired when the value of your input changes. An object containing the value is currently the only thing passed. | | validate | bool | func(value) | false | If this is set to true, then validation will fail if a nothing is provided. You can also pass in a callback function that takes passes the current value of the field. This callback must return a boolean value. | | value | string | '' | Initial value to be passed. |

9. <Textarea />

| Name | Type | Default Value | Description | | ---- | ---- | ------------- | ----------- | | className | string | '' | Custom className you may want to add for styling purposes. | | errorMessage | bool | string | true | By default an error message is displayed when validation is failed. You can either set this to false to turn off the error message individually or you can pass in a custom error message, which also takes html: 'Error<br>Message.'; otherwise, the default error message will be displayed. | | id | string* | undefined | Property that determines the key that will be sent to the server. Also, if label is not provided, then the label will be titleized according to this id. | | label | bool | string | true | Labels are created intelligently by default according to the id you provide; however, you can also pass a string to this prop to display a custom label. You can also pass in html: 'This is a <br> label'. | | onChange | func | ({ value }) => {} | Callback that is fired when the value of your input changes. An object containing the value is currently the only thing passed. | | validate | bool | func(value) | false | If this is set to true, then validation will fail if a nothing is provided. You can also pass in a callback function that takes passes the current value of the field. This callback must return a boolean value. | | value | string | '' | Initial value to be passed. |