Clean Form

Form Component from React and Styled Components

Cleanform is a React component with state management (using React useState hook), styled with Styled Components, that allows quick form building with custom validation (for the entire form or on a per-field basis) and conditional rendering.

Features

• Quick forms passing fields as Javascript objects
• auto state-management using react useState hook
• Mark specific fields or entire form sections as required
• Form pagination out of the box
• Custom validation
• Conditional rendering
• Custom components (wrapped by CleanForm HOC to state management)
• Custom error messages
• Custom classes (applied to whole form or to individual fields)
• Custom field styles passed as data

How to use

import Cleanform from "<module_path>/Cleanform";

Just import Cleanform into your form component and pass the mandatory props, listed below:

formObject

An object (or a function that returns an object) with the form structure (see example below).

formState and setFormState

The state of the form and its setter:

const [formState, setFormState] = useState({});

submitHandler

A function that will receive two parameters from Cleanform HOC, event and errors. Event is the submit event and errors is an array with all the errors collected from fields that not pass validation (global or custom).

Example:

import React, { useState } from "react";

const Myform = (props) => {
    const [formState, setFormState] = useState({});
  const formObject = state => ({
    section1: {
      sectionName: 'CleanForm test',
      elemArr: [
        {
          el: 'customJSX',
          name: 'myCustomJSX',
          jsx: (<h1>Hello from CleanForm!</h1>),
        },
        {
          el: 'input',
          type: 'text',
          name: 'field1',
          labelText: 'Field 1',
          info: 'This is a filed hint for field 1',
          customValidation: (value, st) => value && value.length >= 5
            ? ''
            : 'Field should contains, at least, 5 chars',
        },
        {
          el: 'select',
          name: 'field2',
          labelText: 'Field 2',
          options: [
            { label: 'option 1', value: 'opt1' },
            'option 2', // label and value = "option 2"
          ],
          conditionalRender: st => st.field1 && st.field1.length >= 5,
          fieldsetStyles: { width: '75%' },
          containerClasses: 'field-container-custom-class',
          inputClasses: 'input-custom-class',
        },
        {
          el: 'customComponent',
          name: 'myCustomComponent',
          component: (<YourCustomComponent />),
        },
        {
          el: 'radioset',
          name: 'whichDoYouPrefere',
          conditionalRender: st => st.field1 && st.field2,
          options: [
            { label: 'Foo', value: 'foo' },
            { label: 'Bar', value: 'bar' },
          ],
        },
        {
          el: 'customJSX',
          name: 'myCustomJSX',
          jsx: (
            !!Object.keys(state).length && (
              <div>
                <h1>state:</h1>
                <div>{JSON.stringify(state)}</div>
              </div>
            )),
        },
      ],
    },
  });

  const submitHandler = (e, errors) => {
    console.log(e);
    console.log(errors);
  };

  return (
    <CleanForm
      formObject={formObject(formState)}
      formState={formState}
      setFormState={setFormState}
      submitHandler={submitHandler}
    />
  );
};

export default MyForm;

CleanForm is open source with a public repository on GitHub.

Installation

CleanForm requires you to import the following dependences into your project:

• React
• Styled Components
• React Transition Group
• Lodash Clonedeep

npm install react styled components react-transition-group lodash.clonedeep

License

Copyright (c) <2021> Thiago Rodrigues Meyer

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.