redux-valid-form

Declarative forms for your React Redux Applications with inbuilt validation

Why?

Many packages for react that provides forms do not have inbuild validation. Many packages that have inbuild validation are not declarative at all. This package was created with the purpose to support both of those features.

Installation

npm i -S redux-valid-form

yarn add redux-valid-form

Usage

After installation you have to import and add reduxValidButton, reduxValidForm, reduxValidInput to your combineReducers() function and you are ready to go. Now you can import different components from redux-valid-form in your react application and you are ready to create some forms in very few lines that are declarative and valid. For all of these components you have different properties.

Example:

Simple Example

Reducers:

Add reducers to combineReducers

Components:

Form
Button
Date
Datetime
Email
Number
Password
Phonenumber
Text
Textarea
Time

Props:

id
className
max
min
placeholder
required
value
onClick

Simple example

Simple clone this repository and cd into the examples folder and run npm install and npm start and you are ready to go. Visit http://localhost:3000.

Here we have an example of a Form with a Text, an Email and a Date inputs.

The form can only be submitted if it is valid.

For simplicity we just console.log() the output of the form.

You need to add 3 reducers to your store. Which means you have to import reduxValidButton, reduxValidForm, and reduxValidInput and add it to your combineReducer function.

In your reducers.js (or the file where you have combine your reducer):

import {
  reduxValidButton,
  reduxValidForm,
  reduxValid,
} from 'redux-valid-form'

// add these 3 reducers to your combineReducers function
const allReducers = combineReducers({
  reduxValidButton,
  reduxValidForm,
  reduxValidInput,
});

export default allReducers;

Your form component:

import {
  Button,
  Date,
  Email,
  Form,
  Text,
} from 'redux-valid-form';

const MyForm = () => (
  <Form id="my-form-id">
    <Email id="email" required="true" />
    <Date date="date" />
    <Text id="text" min={3} max={12} required="true" />
    <Submit
      value="Click Me!"
      onClick={(validFormInputValues) => console.log(validFormInputValues)}
    />
  <Form>
);

export default MyForm;

If you fill all the required fields correctly, than you are able to click the button otherwise it is disabled and shows you a warning message. If you click the button you will console log the valid inputs of the form.

The output could look somthing like that:

{
  "email": "example@mail.com",
  "date": "",
  "text": "example text",
}

Reducers

Add reducers to combineReducers

As redux-valid-form uses redux, its reducers has to be added to the combineReducers function.

This is a simple example of how you app.js could look like.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import {
  applyMiddleware,
  combineReducers,
  createStore,
} from 'redux';
import ReduxThunk from 'redux-thunk';
import {
  reduxValidButton,
  reduxValidForm,
  reduxValid,
} from 'redux-valid-form'

// add these 3 reducers to your combineReducers function
const allReducers = combineReducers({
  reduxValidButton,
  reduxValidForm,
  reduxValidInput,
});

// create the store with the reducers
const store = createStore(allReducers, applyMiddleware(ReduxThunk));

// add the store to you application
ReactDOM.render(
  <Provider store={store}>
    {/*
      *
      * add the components with
      * the awesome valid forms
      *
      */}
  </Provider>,
  document.getElementById('root'),
)

Components

Form

Props:

id: string (required)
className: string

The Form component is the parent component that holds all the other components. This component is the only required component.

import { Form } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    {/* put here all your inputs and the submit button */}
  <Form>
);

export default MyForm;

Date

Props:

id: string
className: string
placeholder: string
required: string
value: string

import { Form, Date } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    <Date
      id="my-date-input"
      classNmae="my-date-class"
      placeholder="my-date-placeholder"
      required="true"
      value="05/06/2017"
    />
  <Form>
);

export default MyForm;

Datetime

Props:

id: string
className: string
placeholder: string
required: string
value: string

import { Form, Datetime } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    <Datetime
      id="my-datetime-input"
      classNmae="my-datetime-class"
      placeholder="my-datetime-placeholder"
      required="true"
      value="05/06/2017"
    />
  <Form>
);

export default MyForm;

Email

Props:

id: string
className: string
placeholder: string
required: string
value: string

import { Form, Email } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    <Email
      id="my-email-input"
      classNmae="my-email-class"
      placeholder="my-email-placeholder"
      required="true"
      value="john@doe.com"
    />
  <Form>
);

export default MyForm;

Number

Props:

id: string
className: string
placeholder: string
required: string
value: string

import { Form, Number } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    <Number
      id="my-number-input"
      classNmae="my-number-class"
      placeholder="my-number-placeholder"
      required="true"
      value=""
    />
  <Form>
);

export default MyForm;

Password

Props:

id: string
className: string
max: number
min: number
placeholder: string
required: string
value: string

import { Form, Password } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    <Password
      id="my-password-input"
      classNmae="my-password-class"
      max={10}
      min={3}
      placeholder="my-password-placeholder"
      required="true"
      value="secret"
    />
  <Form>
);

export default MyForm;

Text

Props:

id: string
className: string
max
min
placeholder: string
required: string
value: string

import { Form, Text } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    <Text
      id="my-text-input"
      classNmae="my-text-class"
      max={10}
      min={3}
      placeholder="my-text-placeholder"
      required="true"
      value="lorum ipsum"
    />
  <Form>
);

export default MyForm;

Textarea

Props:

id: string
className: string
max
min
placeholder: string
required: string
value: string

import { Form, Textarea } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    <Textarea
      id="my-textarea-input"
      classNmae="my-textarea-class"
      max={10}
      min={3}
      placeholder="my-textarea-placeholder"
      required="true"
      value="lorum ipsum..."
    />
  <Form>
);

export default MyForm;

Time

Props:

id: string
className: string
placeholder: string
required: string
value: string

import { Form, Time } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    <Text
      id="my-time-input"
      classNmae="my-time-class"
      placeholder="my-time-placeholder"
      required="true"
      value="12:12"
    />
  <Form>
);

export default MyForm;

Button

Props:

id: string
className: string
value: string
onCLick: function

import { Form, Button } from 'redux-valid-form'

const MyForm = () => (
  <Form
    id="my-form-id"
    className="my-form-class"
  >
    <Button
      id="my-button-id"
      className="my-button-class"
      value="Click Me!"

      onClick={(validFormValues) => {
        // do some stuff with your form input values
        // e.g. POST form input values to server
        // e.g change your applications state
      }}
    />
  <Form>
);

export default MyForm;

Props

id

For all components

Type: string

Default:

Form: no default
Date: form-${formId}-child-${indexOfFormChildren}
Datetime: form-${formId}-child-${indexOfFormChildren}
Email: form-${formId}-child-${indexOfFormChildren}
Phonenumber: form-${formId}-child-${indexOfFormChildren}
Text: form-${formId}-child-${indexOfFormChildren}
Textarea: form-${formId}-child-${indexOfFormChildren}
Time: form-${formId}-child-${indexOfFormChildren}

Required: true

className

For all components

Type: string

Default: no default

Required: false

max

Only for Text, Textarea, and Password components

Type: number

Default: no default

Required: false

min

Only for Text, Textarea, and Password components

Type: number

Default: no default

Required: false

placeholder

Not for Form, and Submit components

Type: string

Default:

Date: MM/DD/YYYY
Datetime: MM/DD/YYYY hh:ss:mm
Email: John@Doe.com
Phonenumber: +123456789
Text: no default
Textarea: no default
Time: hh:mm

Required: false

required

Not for Form components

Type: string

Default: no default

Required: false

value

Not for Form components

Type: string

Default: no default

Required: false

onClick

Only for Submit components

Type: function

Default: no default

Required: true

redux-valid-form

redux-valid-form

Why?

Installation

Usage

Table of Contents

Simple example

Reducers

Add reducers to combineReducers

Components

Form

Date

Datetime

Email

Number

Password

Text

Textarea

Time

Button

Props

id

className

max

min

placeholder

required

value

onClick

LICENSE

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads