reformz v0.0.12

#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

###CheckBox A standard Checkbox.

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

###SelectBox A standard dropdown box.

###TextBox A standard textfield.

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

##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: