re-form v1.0.2

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 />

2. \<Fieldset />

Fields

* Denotes a required prop.

1. \<Checkbox />

2. \<Datepicker />

3. \<Email />

4. \<File />

5. \<Hidden />

6. \<Radio />

7. \<Select />

8. \<Text />

9. \<Textarea />