npm package: @li5vany/for-m-react-redux
Description: A quick and easy way to build forms in React for isomorphic application
Author: li5vany
Latest version: 0.1.2

# for-m-react-redux

A quick and easy way to build forms in React for isomorphic application.

**Dependencies**

- React
- Redux

**Install**

clone repo
 
`npm install`

`npm start`

or
 
`npm install @li5vany/for-m-react-redux`

Import reducers and combine

`import {reducers} from '@li5vany/for-m-react-redux'`

**Simple Form**

```
import React from 'react';
import {FormReactRedux} from '@li5vany/for-m-react-redux';

const App = () => (
    <FormReactRedux
        formName="simple-form"
        defaultValues={{name: 'Easy way to build...'}}
        submit={(values, e) => {
          console.log('values: ', values);
          // values: {name: 'Easy way to build...'}
        }}
    >
        <input name="name" placeholder="Easy way to build..." required/>
        <input type="submit" value="Submit"/>
    </FormReactRedux>
)
```

**Validation**

- Default validation messages:
```
<FormReactRedux formName="default-validation-messages">
    <input name="required" placeholder="Required" required/>
    {/* display red message */}
    {/* This field is required */}
    <input type="number" name="number" placeholder="Number"/>
    {/* This field most be number */}
    <input type="email" name="email" placeholder="Email"/>
    {/* This field most be email */}
    <input type="submit" value="Submit"/>
</FormReactRedux>
```

- Define validation messages:
    - define new validation messages
    ```
    <FormReactRedux
        formName="define-validation-messages"
        errorMessages={{"This field is required": "Este campo es obligatorio"}}
    >
        <input name="required" placeholder="Required" required/>
        {/* Este campo es obligatorio */}
        <input type="submit" value="Submit"/>
    </FormReactRedux>
    ```
    - define one validation message
    ```
    <FormReactRedux formName="define-one-validation-message">
      <input name="name" placeholder="Required" required errorMessage="Required"/>
      {/* Required */}
      <input type="submit" value="Submit"/>
    </FormReactRedux>
    ```

- Default input type validation
    - email
    - number
    - url
    ```
    <FormReactRedux formName="default-input-type-validation">
      <input type="email" name="email" placeholder="Email"/>
      {/* This field most be email */}
      <input type="number" name="number" placeholder="Number"/>
      {/* This field most be number */}
      <input type="url" name="url" placeholder="Url"/>
      {/* This field most be url */}
      <input type="submit" value="Submit"/>
    </FormReactRedux>
    ```
- Specify validation
    - required
    - alphanumeric
    - word
    - number
    - natural number
    - integer
    - decimal
    - email
    - url
    ```
    <FormReactRedux formName="specify-validation">
      <input name="required" placeholder="Required" required/>
      {/* This field is required */}
      <input name="alphanumeric" placeholder="Alphanumeric" alphanumeric/>
      {/* This field is alphanumeric */}
      <input name="word" placeholder="Only Words" word/>
      {/* This field is word */}
      <input name="number" placeholder="Number" number/>
      {/* This field is number */}
      <input name="naturalNumber" placeholder="Natural number" naturalNumber/>
      {/* This field is natural number */}
      <input name="integer" placeholder="Integer" integer/>
      {/* This field is integer */}
      <input name="decimal" placeholder="Decimal" decimal/>
      {/* This field is decimal */}
      <input name="email" placeholder="Email" email/>
      {/* This field is email */}
      <input name="url" placeholder="Url" url/>
      {/* This field is url */}
      <input type="submit" value="Submit"/>
    </FormReactRedux>
    ```
    - Function Validation
    ```
    <FormReactRedux formName="function-validation">
      <input name="more-then" placeholder="More then 2 characters" validation={(value, values) => value.toString().length > 2} errorMessage="This field required more then 2 characters"/>
      <input type="submit" value="Submit"/>
    </FormReactRedux>
    ```
    - Boolean Validation
    ```
    <FormReactRedux formName="boolean-validation">
      <input name="always-invalid" placeholder="Always invalid" required validation={false} errorMessage="This field always be invalid"/>
      <input type="submit" value="Submit"/>
    </FormReactRedux>
    ```
- Style error message
```
<FormReactRedux formName="style-error-message" styleErrorMessage={{color: 'green'}}>
  <input name="required" placeholder="Required" required/>
  <input type="submit" value="Submit"/>
</FormReactRedux>
```

**Handle values**

- Get Values. Submit function only fire in case form is valid if it's not then see the errors messages.
```
<FormReactRedux
  formName="get-values"
  submit={(values, e) => {
    console.log('values: ', values);
    // values: {name: 'Easy way to build...'}
  }}
>
  <input name="name" placeholder="Name" required/>
  <input type="submit" value="Submit"/>
</FormReactRedux>
```

- Set Values from object
```
<FormReactRedux formName="set-values" defaultValues={{name: 'Default value'}}>
  <input name="name" placeholder="Name" required/>
  <input type="submit" value="Submit"/>
</FormReactRedux>
```

- Set Value on field
```
<FormReactRedux formName="set-value">
  <input name="name" placeholder="Name" defaultValue="Default Value" required/>
  <input type="submit" value="Submit"/>
</FormReactRedux>
```

- Set Value on functionality
```
import React from 'react';
import {connect} from 'react-redux';
import {FormReactRedux, types} from '@li5vany/for-m-react-redux';

const App = ({formReactReduxChangeFieldValue}) => (
  <div>
    <button
      onClick={() => {
        // defaultValues only if the form have defined
        let defaultValues = {name: 'TheName', surname: ''};
        formReactReduxChangeFieldValue('set-value-fn', 'surname', 'TheSurname', defaultValues)
      }}
    >
      Click to add value
    </button>
    
    <FormReactRedux formName="set-value-fn" defaultValues={{name: 'TheName', surname: ''}}>
      <input name="name" placeholder="Name"/>
      <input name="surname" placeholder="Surname"/>
      <input type="submit" value="Submit"/>
    </FormReactRedux>
  </div>
)

const mapDispatchProps = dispatch => ({
  formReactReduxChangeFieldValue: (formName, fieldName, fieldValue, defaultValues) => {
    dispatch({type: types.FORM_REACT_REDUX_CHANGE_VALUE, data: {formName, fieldName, fieldValue, defaultValues}})
  }
});
connect(undefined, mapDispatchProps)(App);
```

- Default submit values
```
<FormReactRedux noPreventDefault formName="default-submit-value">
  <input name="name" placeholder="Name" required/>
  <input type="submit" value="Submit"/>
</FormReactRedux>
```

- History. Undo (Ctrl-Z). Redo (Ctrl-Shift-Z or Ctrl-Y)
```
import React from 'react';
import {connect} from 'react-redux';
import {FormReactRedux, types} from '@li5vany/for-m-react-redux';

const App = ({formReactReduxUndo, formReactReduxRedo, formReactReduxReset}) => (
  <div>
    <button onClick={() => {formReactReduxUndo("history")}}>Undo</button>
    <button onClick={() => {formReactReduxRedo("history")}}>Redo</button>
    <button onClick={() => {formReactReduxReset("history")}}>Reset this form</button>
    <button onClick={() => {formReactReduxReset()}}>Reset all</button>
    
    <FormReactRedux noPreventDefault formName="history">
      <input name="name" placeholder="Name" required/>
      <input name="surname" placeholder="Surname" required/>
      <input type="submit" value="Submit"/>
    </FormReactRedux>
  </div>
)

const mapDispatchProps = dispatch => ({
  formReactReduxUndo: (formName) => {
    dispatch({type: types.FORM_REACT_REDUX_UNDO, formName})
  },
  formReactReduxRedo: (formName) => {
    dispatch({type: types.FORM_REACT_REDUX_REDO, formName})
  },
  formReactReduxReset: (formName) => {
    dispatch({type: types.FORM_REACT_REDUX_RESET, formName})
  }
});
connect(undefined, mapDispatchProps)(App);
```