reformz

#reFormz

React together with redux is a powerful combination. redux gives you a nice and clean way to control the data flow of your app.

reFormz takes andvantages of that provides an easy way to connect your forms to the redux store. There are other solutions out there like redux-forms, but I found them to big for what I needed. reFormz is a small easy to use library that provided all components like textfields or selectboxes ready to be used.

If the currently available components doesn't fit your need, you can create your custom component easily.

With reFormz you can also easily create wizards...

###Using reFormz

• npm install reformz

Take a look at the examples folder. There are 2 examples showing a basic form and how reFormz can be used with wizards.

###Simple Form Component

To get started you need to add the reFormz reducer to your store:

import {reFormz} from 'reformz';

import { combineReducers, createStore } from 'redux';

const logger = createLogger({duration:true});

const reducer = combineReducers({
  //apply other reducer here
  reFormz
});

const store = createStore(reducer);

A simple Form component looks like this:

import React from "react";
import {Provider} from "react-redux";
import {TextBox, Form} from "reformz";
import {validation} from './validation';

import configureStore from "./redux/store/configureStore";

const store = configureStore();
class BasicForm extends React.Component {

  constructor() {
    super();
    this.formName = "basicForm";
  }

  onSubmit(values) {
    alert("You would submit the following values\n " + JSON.stringify(values));
    console.info("Got the following values", values);
  }

  render() {
    return (
      <Provider store={store}>
        <Form
          validationFunc={validation}
          formName={this.formName}
          onSubmit={this.onSubmit}>

          <div className="form-group">
            <label>Name:</label>
            <TextBox
              fieldName={'name'}
              className="form-control"
              validateErrorClass="basic__error"
              placeholder='Name (required)'
              type='text'
              required="required"
            />
          </div>

          <input type="submit" className="btn btn-primary"/>
        </Form>
      </Provider>);
  }
}

To validate your form data before the submit, you can add a validation function to the Form component.

export function validation(storeValues) {
  let errors = {};
  if (storeValues.name == null) {
    errors.name = 'Name must not be empty.';
    return errors;
  }

  return {};
}

###Running the examples Be sure to open the dev tools. redux-logger shows you exactly what is going on.

####Basic Example

• git clone https://orangecoding.github.io/reformz
• cd reformz
• npm i && cd ./examples/basic && npm i && cd ../../ && npm run example:basic
• browse to http://localhost:3000

####Wizard Example

• git clone https://orangecoding.github.io/reformz
• cd reformz
• npm i && cd ./examples/wizard && npm i && cd ../../ && npm run example:wizard
• browse to http://localhost:3000

###Development

• git clone https://orangecoding.github.io/reformz
• cd reFormz
• npm run build
• npm link
• cd ./examples/basic && npm link reformz

Now you can run npm run example:basic and it will start the basic example using the reFormz version you just build.

###Tests

• npm run test

##Components ###Form Use the Formelement provided by reFormz instead of the standard form element. It connects the form to the redux store and returns the values on submit

Property	required	Description
formName	✓	Name of the form
onSubmit	✓	Func that will be called if form has been submitted. Will get the store values as params.
className	x	Additional CSS classes
validationFunc	x	Function that is being used to validate your fields (See Validation)
resetFormOnUnload	x	If this is false, the form will not be resetted once the form has been unloaded. This way, the values will stay if you browser to any other side (in your single page app). Default is: true

###CheckBox A standard Checkbox.

Property	required	Description
fieldName	✓	Name of the field
className	x	Additional CSS classes
label	x	String of the label that describes what this box is about
validateErrorClass	x	Additional CSS classes for the validation error label

###RadioButton A standard RadioButton. If you want different radio buttons to be "the same family", give it the same name.

Property	required	Description
fieldName	✓	Name of the radio button
fieldValue	✓	Value of the radio button
className	x	Additional CSS classes
label	x	String of the label that describes what this box is about
validateErrorClass	x	Additional CSS classes for the validation error label

###SelectBox A standard dropdown box.

Property	required	Description
fieldName	✓	Name of the field
values	✓	Values for this selectbox. [{label: 'SomeLabel', value: 'SomeVaue'}, (...)]
className	x	Additional CSS classes
defaultValue	x	Preselected value {label: 'SomeLabel', value: 'SomeVaue'}
validateErrorClass	x	Additional CSS classes for the validation error label

###TextBox A standard textfield.

Property	required	Description
fieldName	✓	Name of the field
type	✓	Any standard textbox type, for instance email / number.
className	x	Additional CSS classes
placeholder	x	Placeholder for textfield
validateErrorClass	x	Additional CSS classes for the validation error label

###ResetFormButton A standard button that is resetting the whole form once it has been pressed.

Property	required	Description
buttonLabel	✓	Label of the button
className	x	Additional CSS classes

##Validation reFormz includes a simple mechanism to validate your fields.

A validation function must always return an object. It must be parsed into the Form component as a prop.

A validation function could look like this:

const validation = (storeValues) => {
 let errors = {};
 if(storeValues.*fieldName* == null){
 	errors.*fieldName* = '*fieldName* must not be empty.';
 }
 return errors;
}

Noticed the errors.fieldName? You need to return an object containing errors with the fieldName as the key.

See examples for help.

##Actions You normaly should not use these actions directly, but if you need a custom component, you can use these actions to bind your component to reFormz. See the basic example on how to do this.

###init If you want to fill a form with some data

• init(formName:string, formValue:object)

###onChange If a value has been changed, this action saves the new value into the store.

• onChange(formName:string, fieldName:string, fieldValue:any)

###resetForm If a form should be resetted (All values will be removed from the store), call this action.

• resetForm(formName:string)

###resetField If a specific field should be resetted a.k.a the value should be removed from the store call this action.

• resetForm(formName:string, fieldName:string)

##Custom components Some form information can be accessed via the components context if you use Form:

Property	Description
form	The object containing the form information
formName	Name of the form
onChange	see Actions
resetField	see Actions
resetForm	see Actions
getValue	getValue(form, formName, fieldName) returns the value of the searched fieldName in the form state. (similar to form[formName][fieldName])